Investigative Journalist Challenge<\/title>\n <style>\n :root {\n --bg: #070b0f;\n --panel: #101820;\n --ink: #f4ead8;\n --paper: #e9dcc3;\n --paper-dark: #c8b48f;\n --gold: #d69b2d;\n --green: #56783d;\n --blue: #245d90;\n --purple: #6b4a86;\n --teal: #17818b;\n --orange: #bb641b;\n --danger: #bd2d2d;\n --success: #4c8b43;\n --shadow: 0 20px 60px rgba(0, 0, 0, .45);\n --radius: 22px;\n --font-display: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n --font-body: Georgia, \"Times New Roman\", serif;\n --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n }\n\n * { box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body {\n margin: 0;\n color: var(--ink);\n background:\n radial-gradient(circle at 25% 15%, rgba(27, 53, 72, .24), transparent 34%),\n radial-gradient(circle at 85% 80%, rgba(146, 74, 18, .14), transparent 30%),\n #05080b;\n font-family: var(--font-ui);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n body::before {\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n opacity: .14;\n background-image:\n linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);\n background-size: 4px 4px;\n mix-blend-mode: overlay;\n z-index: 100;\n }\n\n button, input { font: inherit; }\n button { cursor: pointer; }\n\n .app {\n width: min(1600px, 100%);\n margin: 0 auto;\n padding: 18px;\n }\n\n .topbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 14px;\n margin-bottom: 14px;\n }\n\n .brand-mini {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 900;\n letter-spacing: .07em;\n text-transform: uppercase;\n font-size: .86rem;\n color: #e6d4b3;\n }\n\n .brand-mini .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--gold);\n box-shadow: 0 0 18px rgba(214,155,45,.65);\n }\n\n .top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n\n .ghost-btn,\n .solid-btn {\n border: 1px solid rgba(255,255,255,.16);\n color: var(--ink);\n background: rgba(255,255,255,.055);\n padding: 10px 14px;\n border-radius: 999px;\n font-weight: 800;\n transition: .2s ease;\n }\n .ghost-btn:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }\n .solid-btn { background: var(--gold); color: #101010; border-color: transparent; }\n .solid-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }\n\n .screen {\n display: none;\n min-height: calc(100vh - 90px);\n border: 1px solid rgba(255,255,255,.12);\n border-radius: 28px;\n background: linear-gradient(155deg, rgba(17,27,35,.98), rgba(5,8,11,.98));\n box-shadow: var(--shadow);\n overflow: hidden;\n position: relative;\n }\n .screen.active { display: block; animation: fadeIn .28s ease; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }\n\n \/* HOME *\/\n .home-grid {\n display: grid;\n grid-template-columns: 1.18fr .82fr;\n min-height: calc(100vh - 92px);\n }\n\n .hero {\n position: relative;\n min-height: 760px;\n overflow: hidden;\n background:\n linear-gradient(90deg, rgba(6,9,13,.12), rgba(6,9,13,.6)),\n radial-gradient(circle at 20% 15%, rgba(240,176,67,.22), transparent 32%),\n linear-gradient(#10202d, #070b0f 68%);\n border-right: 1px solid rgba(255,255,255,.1);\n }\n\n .hero svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n .hero-copy {\n position: relative;\n z-index: 3;\n padding: clamp(28px, 5vw, 68px);\n max-width: 900px;\n }\n\n .kicker {\n color: var(--gold);\n text-transform: uppercase;\n letter-spacing: .3em;\n font-weight: 900;\n font-size: .8rem;\n margin-bottom: 12px;\n }\n\n h1, h2, h3, p { margin-top: 0; }\n\n .hero h1 {\n font-family: var(--font-display);\n text-transform: uppercase;\n line-height: .89;\n letter-spacing: .015em;\n font-size: clamp(3.2rem, 7.5vw, 8.6rem);\n margin: 0;\n text-shadow: 0 4px 0 rgba(0,0,0,.35);\n }\n .hero h1 span { display: block; color: var(--gold); font-size: .7em; }\n .hero-sub {\n margin-top: 18px;\n font-family: var(--font-body);\n font-size: clamp(1rem, 2vw, 1.35rem);\n font-weight: 700;\n max-width: 660px;\n letter-spacing: .05em;\n }\n\n .hero-bottom {\n position: absolute;\n z-index: 4;\n left: clamp(22px, 4vw, 62px);\n right: clamp(22px, 4vw, 62px);\n bottom: 24px;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 14px;\n align-items: end;\n }\n\n .rules-card {\n background: rgba(5,10,14,.86);\n border: 1px solid rgba(214,155,45,.5);\n border-radius: 18px;\n padding: 15px 18px;\n backdrop-filter: blur(8px);\n }\n .rules-card strong { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }\n .rules-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: .9rem; }\n .pill-score { display: inline-flex; align-items: center; gap: 7px; }\n .pill-score b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--success); }\n .pill-score.bad b { background: var(--danger); }\n\n .start-big {\n padding: 17px 24px;\n min-width: 220px;\n border: 0;\n border-radius: 16px;\n background: linear-gradient(180deg, #679348, #3f652e);\n color: white;\n font-family: var(--font-display);\n font-size: 1.35rem;\n letter-spacing: .06em;\n text-transform: uppercase;\n box-shadow: 0 10px 30px rgba(38,82,37,.35);\n }\n .start-big:hover { transform: translateY(-2px); filter: brightness(1.08); }\n\n .menu-pane {\n padding: clamp(20px, 3vw, 46px);\n display: flex;\n flex-direction: column;\n gap: 14px;\n justify-content: center;\n background:\n radial-gradient(circle at 100% 0, rgba(255,255,255,.05), transparent 28%),\n linear-gradient(180deg, #0b1117, #080b0e);\n }\n\n .menu-heading {\n font-family: var(--font-display);\n text-transform: uppercase;\n letter-spacing: .05em;\n font-size: clamp(1.6rem, 3vw, 2.9rem);\n margin-bottom: 6px;\n }\n\n .mission-card {\n --accent: var(--green);\n width: 100%;\n display: grid;\n grid-template-columns: 92px 1fr 54px;\n align-items: center;\n gap: 16px;\n background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 31%, #0e151d), #efe4cf 26%, #e9dcc3);\n color: #111820;\n border: 2px solid color-mix(in srgb, var(--accent) 78%, white 8%);\n border-radius: 18px;\n padding: 13px 14px;\n text-align: left;\n min-height: 112px;\n transition: .18s ease;\n position: relative;\n overflow: hidden;\n }\n .mission-card::after {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n opacity: .08;\n background: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 4px);\n }\n .mission-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 28px rgba(0,0,0,.28); }\n .mission-card.done { box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 0 0 2px rgba(80,160,80,.25); }\n .mission-card.locked { filter: grayscale(.7) brightness(.7); opacity: .7; }\n .mission-card.locked:hover { transform: none; }\n\n .mission-icon {\n width: 78px;\n height: 78px;\n border-radius: 18px;\n display: grid;\n place-items: center;\n color: white;\n border: 1px solid rgba(255,255,255,.32);\n background: rgba(0,0,0,.26);\n }\n .mission-icon svg { width: 54px; height: 54px; }\n\n .mission-card small {\n display: block;\n color: color-mix(in srgb, var(--accent) 82%, #141414);\n text-transform: uppercase;\n letter-spacing: .11em;\n font-weight: 1000;\n margin-bottom: 2px;\n }\n .mission-card h3 {\n font-family: var(--font-display);\n font-size: clamp(1.2rem, 2vw, 2rem);\n margin: 0;\n text-transform: uppercase;\n letter-spacing: .03em;\n line-height: 1;\n }\n .mission-card p { margin: 7px 0 0; font-size: .9rem; font-weight: 650; }\n .chev {\n width: 46px; height: 46px; border-radius: 50%;\n display: grid; place-items: center;\n background: var(--accent); color: #fff;\n font-size: 1.6rem; font-weight: 900;\n }\n .done-badge {\n position: absolute;\n top: 7px;\n right: 8px;\n background: #2f7f3e;\n color: #fff;\n padding: 4px 8px;\n border-radius: 999px;\n font-size: .68rem;\n font-weight: 900;\n letter-spacing: .04em;\n display: none;\n }\n .mission-card.done .done-badge { display: block; }\n\n \/* MISSION LAYOUT *\/\n .mission-screen {\n --accent: var(--green);\n min-height: calc(100vh - 90px);\n padding: clamp(18px, 3vw, 38px);\n background:\n radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 30%),\n linear-gradient(150deg, #0b1117, #06090c 70%);\n }\n\n .mission-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n border-bottom: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);\n padding-bottom: 14px;\n margin-bottom: 18px;\n }\n .mission-title-wrap { display: flex; gap: 14px; align-items: center; }\n .mission-number {\n width: 62px; height: 62px; border-radius: 18px;\n display: grid; place-items: center;\n background: var(--accent); color: white;\n font-family: var(--font-display); font-size: 2rem;\n box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent);\n flex: 0 0 auto;\n }\n .mission-header h2 {\n font-family: var(--font-display);\n text-transform: uppercase;\n line-height: .96;\n font-size: clamp(2rem, 5vw, 4.5rem);\n margin: 0;\n letter-spacing: .03em;\n }\n .mission-header h2 span { color: var(--accent); }\n .mission-header p { margin: 7px 0 0; color: #d8ceb9; font-family: var(--font-body); font-size: clamp(.95rem, 1.6vw, 1.2rem); }\n\n .progress-chip {\n min-width: 140px;\n border-radius: 16px;\n padding: 10px 13px;\n border: 1px solid rgba(255,255,255,.12);\n background: rgba(255,255,255,.05);\n text-align: right;\n font-weight: 900;\n }\n .progress-chip b { color: var(--gold); font-size: 1.4rem; }\n\n .paper {\n color: #171513;\n background:\n linear-gradient(135deg, rgba(130,95,45,.08), transparent 28%),\n radial-gradient(circle at 20% 15%, rgba(255,255,255,.48), transparent 25%),\n var(--paper);\n border: 1px solid rgba(73,50,24,.28);\n box-shadow: 0 12px 28px rgba(0,0,0,.32);\n border-radius: 12px;\n position: relative;\n }\n .paper::after {\n content: \"\";\n position: absolute; inset: 0; pointer-events: none;\n opacity: .13;\n background-image: repeating-linear-gradient(0deg, #2d241a 0 1px, transparent 1px 4px);\n border-radius: inherit;\n }\n\n .choice-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 14px;\n margin-top: 18px;\n }\n .choice-btn {\n --local: var(--accent);\n min-height: 118px;\n border-radius: 16px;\n border: 2px solid color-mix(in srgb, var(--local) 74%, #111);\n background: var(--paper);\n color: #17120e;\n padding: 18px;\n text-align: left;\n display: grid;\n grid-template-columns: 54px 1fr;\n gap: 14px;\n align-items: center;\n font-family: var(--font-body);\n font-weight: 800;\n font-size: clamp(1rem, 2vw, 1.35rem);\n transition: .18s ease;\n position: relative;\n overflow: hidden;\n }\n .choice-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 24px rgba(0,0,0,.26); }\n .choice-btn.selected { outline: 4px solid color-mix(in srgb, var(--local) 70%, white 10%); }\n .choice-btn.correct { background: #dcebd4; border-color: var(--success); }\n .choice-btn.wrong { background: #f0d2c9; border-color: var(--danger); }\n .choice-letter {\n width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;\n font-family: var(--font-display); font-size: 1.8rem; color: white;\n background: var(--local);\n }\n\n .feedback {\n margin-top: 14px;\n border-radius: 14px;\n border: 1px solid rgba(255,255,255,.13);\n background: rgba(255,255,255,.055);\n padding: 14px 16px;\n display: none;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n }\n .feedback.show { display: flex; animation: fadeIn .2s ease; }\n .feedback strong { color: var(--gold); }\n .feedback .next-btn {\n border: 0;\n border-radius: 999px;\n padding: 11px 16px;\n background: var(--accent);\n color: white;\n font-weight: 900;\n white-space: nowrap;\n }\n\n .mission-nav {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n margin-top: 18px;\n flex-wrap: wrap;\n }\n\n \/* Mission 1 *\/\n .m1-layout {\n display: grid;\n grid-template-columns: .9fr 1.1fr;\n gap: 18px;\n min-height: 470px;\n }\n .source-note { padding: clamp(22px, 4vw, 52px); font-family: var(--font-body); font-size: clamp(1.15rem, 2.2vw, 2rem); line-height: 1.55; transform: rotate(-.5deg); }\n .source-note::before { content: \"\ud83d\udcce\"; position: absolute; top: -16px; left: 22px; font-size: 2.8rem; filter: grayscale(1); }\n .alley-scene { min-height: 470px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #0d151c; }\n .alley-scene svg { width: 100%; height: 100%; display: block; }\n\n \/* Mission 2 *\/\n .evidence-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0,1fr));\n gap: 15px;\n }\n .evidence {\n background: #d8c9ad;\n color: #15120f;\n padding: 18px;\n border-radius: 14px;\n border: 1px solid rgba(0,0,0,.25);\n position: relative;\n box-shadow: 0 15px 30px rgba(0,0,0,.32);\n min-height: 490px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n transition: .2s ease;\n }\n .evidence:hover { transform: translateY(-3px); }\n .evidence.selected { outline: 5px solid var(--blue); }\n .doc-tab {\n position: absolute; top: -12px; left: 50%; transform: translateX(-50%);\n background: var(--blue); color: white; padding: 9px 22px;\n border-radius: 6px; font-family: var(--font-display); letter-spacing: .06em;\n box-shadow: 0 8px 15px rgba(0,0,0,.28); white-space: nowrap;\n }\n .evidence-visual {\n margin-top: 24px;\n background: #1b2730;\n border: 9px solid #eee6d6;\n min-height: 260px;\n overflow: hidden;\n border-radius: 3px;\n }\n .evidence-visual svg { width: 100%; height: 100%; display: block; }\n .caption-slip { background: #e6d5b6; border: 1px solid #b59b70; padding: 10px; font-family: \"Courier New\", monospace; font-size: .9rem; }\n .evidence-summary { font-family: var(--font-body); font-size: 1rem; line-height: 1.35; margin: auto 0 0; }\n .contract-doc {\n min-height: 280px;\n padding: 20px;\n background: #efe5d2;\n font-family: Georgia, serif;\n font-size: .7rem;\n line-height: 1.2;\n position: relative;\n }\n .contract-doc h4 { text-align: center; margin: 0 0 8px; font-size: 1.15rem; }\n .stamp { position: absolute; right: 12px; bottom: 16px; color: #a42121; border: 3px solid #a42121; padding: 4px 7px; transform: rotate(-7deg); font-weight: 1000; font-size: 1rem; }\n\n \/* Mission 3 *\/\n .desk-scene { min-height: 460px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }\n .desk-scene svg { width: 100%; height: 100%; display: block; }\n\n \/* Mission 4 *\/\n .m4-layout {\n display: grid;\n grid-template-columns: .78fr 1.22fr;\n gap: 18px;\n min-height: 500px;\n }\n .decision-copy { padding: clamp(22px,4vw,52px); font-family: var(--font-body); font-size: clamp(1.05rem,2vw,1.7rem); line-height: 1.55; }\n .decision-copy strong { color: var(--teal); display:block; font-size: 1.2em; margin-bottom: 14px; }\n .crowd-scene { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background:#0a1015; }\n .crowd-scene svg { width: 100%; height: 100%; display:block; }\n\n \/* Final historical multiple-choice mission *\/\n .historical-quiz {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 18px;\n align-items: stretch;\n }\n .history-case {\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-height: 470px;\n padding: 22px;\n border: 2px solid #744018;\n border-radius: 20px;\n color: #17120e;\n background:\n linear-gradient(135deg, rgba(130,95,45,.08), transparent 28%),\n radial-gradient(circle at 20% 15%, rgba(255,255,255,.5), transparent 25%),\n var(--paper);\n box-shadow: 0 16px 34px rgba(0,0,0,.34);\n }\n .history-case::before {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n opacity: .11;\n background-image: repeating-linear-gradient(0deg, #2d241a 0 1px, transparent 1px 4px);\n }\n .history-case.solved {\n border-color: var(--success);\n box-shadow: 0 0 0 4px rgba(76,139,67,.22), 0 16px 34px rgba(0,0,0,.34);\n }\n .case-label {\n position: relative;\n z-index: 1;\n align-self: flex-start;\n margin-bottom: 13px;\n padding: 6px 10px;\n border-radius: 999px;\n color: white;\n background: var(--orange);\n font-size: .75rem;\n font-weight: 1000;\n letter-spacing: .1em;\n text-transform: uppercase;\n }\n .history-case h3 {\n position: relative;\n z-index: 1;\n margin: 0 0 18px;\n font-family: var(--font-body);\n font-size: clamp(1.08rem, 1.65vw, 1.38rem);\n line-height: 1.42;\n }\n .case-options {\n position: relative;\n z-index: 1;\n display: grid;\n gap: 10px;\n margin-top: auto;\n }\n .case-option {\n width: 100%;\n min-height: 66px;\n display: grid;\n grid-template-columns: 42px 1fr;\n align-items: center;\n gap: 11px;\n padding: 11px 13px;\n border: 2px solid #8e7148;\n border-radius: 12px;\n color: #17120e;\n background: #f7ecd6;\n text-align: left;\n font-family: var(--font-body);\n font-weight: 800;\n line-height: 1.25;\n transition: .18s ease;\n }\n .case-option:hover,\n .case-option:focus-visible {\n transform: translateY(-2px);\n border-color: var(--orange);\n outline: 3px solid rgba(187,100,27,.25);\n }\n .case-option .option-letter {\n width: 38px;\n height: 38px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n color: white;\n background: var(--orange);\n font-family: var(--font-display);\n font-size: 1.25rem;\n border: 2px solid rgba(255,255,255,.85);\n }\n .case-option.correct {\n border-color: var(--success);\n background: #dcebd4;\n }\n .case-option.wrong {\n border-color: var(--danger);\n background: #f0d2c9;\n animation: qcmShake .22s linear 2;\n }\n .case-option:disabled {\n cursor: default;\n opacity: .86;\n }\n .case-option.correct:disabled { opacity: 1; }\n .case-status {\n position: relative;\n z-index: 1;\n min-height: 46px;\n margin-top: 13px;\n padding: 10px 12px;\n border-radius: 10px;\n color: #4a3520;\n background: rgba(255,255,255,.45);\n font-family: var(--font-body);\n font-size: .92rem;\n line-height: 1.35;\n }\n .case-status.ok { color: #214d27; background: #dcebd4; }\n .case-status.error { color: #7f201d; background: #f0d2c9; }\n @keyframes qcmShake {\n 0%,100% { transform: translateX(0); }\n 35% { transform: translateX(-4px); }\n 70% { transform: translateX(4px); }\n }\n @media (max-width: 1060px) {\n .historical-quiz { grid-template-columns: 1fr; }\n .history-case { min-height: auto; }\n }\n \/* Result *\/\n .result-wrap {\n min-height: calc(100vh - 90px);\n display:grid;\n place-items:center;\n padding: 28px;\n background:\n radial-gradient(circle at 50% 20%, rgba(214,155,45,.22), transparent 32%),\n linear-gradient(160deg,#111923,#06090c 70%);\n }\n .result-card {\n width:min(900px,100%);\n text-align:center;\n padding: clamp(28px,6vw,70px);\n border-radius:28px;\n border:1px solid rgba(255,255,255,.14);\n background:rgba(255,255,255,.055);\n box-shadow:var(--shadow);\n }\n .medal {\n width: 170px; height:170px; margin:0 auto 18px; border-radius:50%;\n display:grid; place-items:center; font-size:5.2rem;\n background: radial-gradient(circle at 35% 30%, #fff1aa, #d29a24 45%, #8d5511 72%);\n color:#4b2d0a; border:9px solid rgba(255,255,255,.18);\n box-shadow:0 0 70px rgba(214,155,45,.4);\n }\n .result-card h2 { font-family:var(--font-display); font-size:clamp(3rem,7vw,6rem); margin:0; text-transform:uppercase; }\n .result-card .score { color:var(--gold); font-size:clamp(2rem,4vw,3.2rem); font-weight:1000; margin:8px 0 20px; }\n .result-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:24px; }\n\n .modal {\n position:fixed; inset:0; z-index:200;\n display:none; align-items:center; justify-content:center;\n background:rgba(0,0,0,.72); padding:20px;\n }\n .modal.show { display:flex; }\n .modal-card { width:min(700px,100%); background:#101820; border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:26px; box-shadow:var(--shadow); }\n .modal-card h3 { font-family:var(--font-display); font-size:2.4rem; margin:0 0 12px; text-transform:uppercase; }\n .modal-card p, .modal-card li { line-height:1.55; color:#ddd0bb; }\n\n .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }\n\n @media (max-width: 840px) {\n .home-grid { grid-template-columns: 1fr; }\n .hero { min-height: 690px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }\n .menu-pane { padding-top: 30px; }\n .mission-card { grid-template-columns: 78px 1fr 46px; }\n .m1-layout, .m4-layout { grid-template-columns:1fr; }\n .evidence-grid { grid-template-columns:1fr; }\n .evidence { min-height: auto; }\n .evidence-visual { min-height: 330px; }\n }\n @media (max-width: 760px) {\n .app { padding: 8px; }\n .topbar { align-items:flex-start; }\n .brand-mini { font-size:.68rem; }\n .screen { border-radius:18px; }\n .hero { min-height: 760px; }\n .hero-copy { padding: 28px 22px; }\n .hero-bottom { grid-template-columns:1fr; left:16px; right:16px; }\n .start-big { width:100%; }\n .choice-grid { grid-template-columns:1fr; }\n .mission-header { align-items:flex-start; }\n .progress-chip { display:none; }\n .mission-title-wrap { align-items:flex-start; }\n .mission-number { width:50px; height:50px; font-size:1.5rem; border-radius:14px; }\n .feedback { align-items:flex-start; flex-direction:column; }\n .match-columns { gap:16px; }\n .match-card { min-height:135px; padding:14px; font-size:.93rem; }\n .menu-pane { padding:16px; }\n .mission-card { grid-template-columns:58px 1fr 38px; min-height:100px; gap:10px; }\n .mission-icon { width:52px; height:52px; border-radius:12px; }\n .mission-icon svg { width:38px; height:38px; }\n .chev { width:36px; height:36px; }\n }\n\n\n \/* ================================================================\n EMBED-SAFE \/ FULL-SCREEN OVERRIDES\n These selectors are intentionally specific so page-builder themes\n cannot wash out the game colours or restyle its buttons.\n ================================================================ *\/\n #ijc-app {\n position: relative !important;\n isolation: isolate !important;\n width: min(1600px, 100%) !important;\n max-width: 1600px !important;\n margin: 0 auto !important;\n padding: 14px !important;\n color: #fff8e8 !important;\n background: #05080b !important;\n border-radius: 24px !important;\n color-scheme: dark;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif !important;\n }\n\n #ijc-app, #ijc-app * { box-sizing: border-box !important; }\n #ijc-app button {\n opacity: 1 !important;\n visibility: visible !important;\n -webkit-text-fill-color: currentColor;\n appearance: none;\n }\n\n #ijc-app .topbar {\n position: relative;\n z-index: 50;\n min-height: 64px;\n padding: 10px 12px !important;\n margin: 0 0 12px !important;\n border: 1px solid #3b5268 !important;\n border-radius: 17px !important;\n background: linear-gradient(180deg, #142333, #08111a) !important;\n box-shadow: 0 10px 28px rgba(0,0,0,.38) !important;\n }\n\n #ijc-app .brand-mini {\n color: #fff8e8 !important;\n opacity: 1 !important;\n text-shadow: 0 1px 2px #000;\n }\n\n #ijc-app .brand-mini .dot {\n width: 15px !important;\n height: 15px !important;\n background: #ffb72f !important;\n border: 2px solid #fff1c2 !important;\n box-shadow: 0 0 0 4px rgba(255,183,47,.2), 0 0 20px rgba(255,183,47,.8) !important;\n }\n\n #ijc-app .top-actions {\n align-items: center;\n gap: 9px !important;\n }\n\n #ijc-app .ghost-btn,\n #ijc-app .solid-btn,\n #ijc-app .fullscreen-btn {\n min-height: 44px;\n padding: 10px 15px !important;\n border-radius: 999px !important;\n font-weight: 900 !important;\n letter-spacing: .01em;\n line-height: 1 !important;\n text-shadow: none !important;\n box-shadow: 0 5px 15px rgba(0,0,0,.28) !important;\n }\n\n #ijc-app .ghost-btn {\n color: #ffffff !important;\n background: #1b3044 !important;\n border: 2px solid #7592ad !important;\n }\n #ijc-app .ghost-btn:hover,\n #ijc-app .ghost-btn:focus-visible {\n color: #ffffff !important;\n background: #284965 !important;\n border-color: #b9d7ef !important;\n outline: 3px solid rgba(124,190,255,.35) !important;\n }\n\n #ijc-app .solid-btn {\n color: #171006 !important;\n background: #ffb833 !important;\n border: 2px solid #ffe2a0 !important;\n }\n\n #ijc-app .fullscreen-btn {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 8px !important;\n color: #ffffff !important;\n background: linear-gradient(180deg, #2485eb, #1358ad) !important;\n border: 2px solid #9ed0ff !important;\n box-shadow: 0 6px 18px rgba(20,102,196,.5) !important;\n }\n #ijc-app .fullscreen-btn:hover,\n #ijc-app .fullscreen-btn:focus-visible {\n background: linear-gradient(180deg, #3c9aff, #1768c9) !important;\n outline: 3px solid rgba(95,174,255,.4) !important;\n transform: translateY(-1px);\n }\n #ijc-app .fullscreen-btn span { font-size: 1.35em; line-height: .7; }\n\n #ijc-app .screen {\n background: linear-gradient(155deg, rgba(17,27,35,.995), rgba(5,8,11,.995)) !important;\n color: #fff8e8 !important;\n border-color: #34495c !important;\n }\n\n #ijc-app .hero h1 {\n color: #fff8e8 !important;\n font-size: clamp(2.7rem, 5.6vw, 7.4rem) !important;\n }\n #ijc-app .hero h1 span,\n #ijc-app .kicker,\n #ijc-app .rules-card strong,\n #ijc-app .score,\n #ijc-app [data-score] { color: #ffb72f !important; }\n\n #ijc-app .menu-heading,\n #ijc-app .hero-sub,\n #ijc-app .rules-card,\n #ijc-app .feedback,\n #ijc-app .mission-header p { color: #fff4df !important; }\n\n #ijc-app .mission-card {\n opacity: 1 !important;\n box-shadow: 0 8px 20px rgba(0,0,0,.28) !important;\n }\n #ijc-app .mission-card h3,\n #ijc-app .mission-card p { color: #111820 !important; opacity: 1 !important; }\n #ijc-app .mission-card small {\n color: #08111a !important;\n background: rgba(255,255,255,.66);\n display: inline-block;\n padding: 3px 7px;\n border-radius: 5px;\n }\n\n #ijc-app .chev,\n #ijc-app .choice-letter,\n #ijc-app .mission-number,\n #ijc-app .pill-score b {\n color: #ffffff !important;\n border: 3px solid rgba(255,255,255,.92) !important;\n box-shadow: 0 0 0 3px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.35) !important;\n opacity: 1 !important;\n }\n\n #ijc-app .choice-btn {\n color: #18120d !important;\n background: #f2e5ca !important;\n opacity: 1 !important;\n }\n #ijc-app .choice-btn:hover,\n #ijc-app .choice-btn:focus-visible {\n filter: brightness(1.05);\n outline: 4px solid rgba(255,255,255,.55) !important;\n }\n #ijc-app .choice-btn:disabled,\n #ijc-app .match-card:disabled,\n #ijc-app .solid-btn:disabled {\n opacity: .72 !important;\n cursor: not-allowed !important;\n }\n\n \/* Immersive fallback works even when an iframe does not allow the\n browser Fullscreen API. *\/\n #ijc-app.immersive,\n #ijc-app:fullscreen,\n #ijc-app:-webkit-full-screen {\n position: fixed !important;\n inset: 0 !important;\n z-index: 2147483646 !important;\n width: 100vw !important;\n max-width: none !important;\n height: 100vh !important;\n height: 100dvh !important;\n margin: 0 !important;\n padding: 10px !important;\n border-radius: 0 !important;\n overflow-x: hidden !important;\n overflow-y: auto !important;\n overscroll-behavior: contain;\n background: #05080b !important;\n }\n\n body.ijc-lock { overflow: hidden !important; }\n\n #ijc-app.immersive .topbar,\n #ijc-app:fullscreen .topbar,\n #ijc-app:-webkit-full-screen .topbar {\n position: sticky !important;\n top: 0 !important;\n z-index: 1000 !important;\n }\n\n #ijc-app.immersive .screen,\n #ijc-app:fullscreen .screen,\n #ijc-app:-webkit-full-screen .screen {\n min-height: calc(100dvh - 88px) !important;\n border-radius: 20px !important;\n }\n\n #ijc-app.immersive .home-grid,\n #ijc-app:fullscreen .home-grid,\n #ijc-app:-webkit-full-screen .home-grid {\n min-height: calc(100dvh - 88px) !important;\n }\n\n @media (min-width: 841px) {\n #ijc-app .home-grid { grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr) !important; }\n #ijc-app .hero { min-height: clamp(620px, calc(100dvh - 92px), 850px) !important; }\n #ijc-app .menu-pane { gap: 10px !important; padding: 22px !important; }\n #ijc-app .mission-card { min-height: 98px !important; padding: 10px 12px !important; }\n #ijc-app .mission-icon { width: 68px !important; height: 68px !important; }\n #ijc-app .mission-icon svg { width: 46px !important; height: 46px !important; }\n }\n\n @media (max-width: 840px) {\n #ijc-app { padding: 7px !important; border-radius: 14px !important; }\n #ijc-app .topbar { align-items: stretch !important; flex-direction: column !important; }\n #ijc-app .top-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; }\n #ijc-app .fullscreen-btn { grid-column: 1 \/ -1; }\n #ijc-app .ghost-btn, #ijc-app .fullscreen-btn { width: 100% !important; }\n #ijc-app .hero { min-height: 680px !important; }\n }\n\n @media (max-width: 520px) {\n #ijc-app .top-actions { grid-template-columns: 1fr !important; }\n #ijc-app .fullscreen-btn { grid-column: auto; }\n #ijc-app .brand-mini { font-size: .76rem !important; }\n #ijc-app .mission-card { grid-template-columns: 54px 1fr 36px !important; }\n }\n\n <\/style>\n<\/head>\n<body>\n\n\n\n <div class=\"app\" id=\"ijc-app\">\n <header class=\"topbar\">\n <div class=\"brand-mini\"><span class=\"dot\"><\/span> Investigative Journalist Challenge<\/div>\n <div class=\"top-actions\">\n <button class=\"fullscreen-btn\" id=\"fullscreenBtn\" type=\"button\" aria-pressed=\"false\" title=\"Open the game in full screen\"><span aria-hidden=\"true\">\u26f6<\/span> Full screen<\/button>\n <button class=\"ghost-btn\" id=\"howBtn\">How to play<\/button>\n <button class=\"ghost-btn\" id=\"soundBtn\" aria-pressed=\"true\">Sound: on<\/button>\n <button class=\"ghost-btn\" id=\"resetBtn\">Reset game<\/button>\n <\/div>\n <\/header>\n\n \n <main id=\"home\" class=\"screen active\" aria-label=\"Main menu\">\n <div class=\"home-grid\">\n <section class=\"hero\">\n <svg viewBox=\"0 0 1000 900\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"city\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stop-color=\"#14283a\"><\/stop>\n <stop offset=\"1\" stop-color=\"#071018\"><\/stop>\n <\/linearGradient>\n <linearGradient id=\"wood\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n <stop offset=\"0\" stop-color=\"#2a170d\"><\/stop><stop offset=\".55\" stop-color=\"#5b341b\"><\/stop><stop offset=\"1\" stop-color=\"#21120b\"><\/stop>\n <\/linearGradient>\n <radialGradient id=\"lampGlow\">\n <stop offset=\"0\" stop-color=\"#ffd98a\" stop-opacity=\".7\"><\/stop>\n <stop offset=\"1\" stop-color=\"#ffd98a\" stop-opacity=\"0\"><\/stop>\n <\/radialGradient>\n <\/defs>\n <rect width=\"1000\" height=\"900\" fill=\"#071018\"><\/rect>\n <rect x=\"620\" y=\"0\" width=\"380\" height=\"560\" fill=\"url(#city)\"><\/rect>\n <g fill=\"#09131d\">\n <rect x=\"650\" y=\"170\" width=\"80\" height=\"390\"><\/rect><rect x=\"730\" y=\"100\" width=\"90\" height=\"460\"><\/rect><rect x=\"825\" y=\"220\" width=\"55\" height=\"340\"><\/rect><rect x=\"885\" y=\"130\" width=\"100\" height=\"430\"><\/rect>\n <\/g>\n <g fill=\"#d6ad60\" opacity=\".8\">\n <rect x=\"670\" y=\"205\" width=\"8\" height=\"12\"><\/rect><rect x=\"690\" y=\"235\" width=\"8\" height=\"12\"><\/rect><rect x=\"750\" y=\"145\" width=\"8\" height=\"12\"><\/rect><rect x=\"785\" y=\"180\" width=\"8\" height=\"12\"><\/rect><rect x=\"845\" y=\"260\" width=\"8\" height=\"12\"><\/rect><rect x=\"915\" y=\"170\" width=\"8\" height=\"12\"><\/rect><rect x=\"945\" y=\"220\" width=\"8\" height=\"12\"><\/rect>\n <\/g>\n <rect x=\"0\" y=\"520\" width=\"1000\" height=\"380\" fill=\"url(#wood)\"><\/rect>\n <g opacity=\".95\">\n <rect x=\"120\" y=\"230\" width=\"500\" height=\"290\" rx=\"8\" fill=\"#6c4d2f\" stroke=\"#a1764b\" stroke-width=\"10\"><\/rect>\n <path d=\"M155 260 H585 V490 H155 Z\" fill=\"#b68a54\" opacity=\".24\"><\/path>\n <g stroke=\"#9e2c21\" stroke-width=\"4\" fill=\"none\">\n <path d=\"M200 300 L360 360 L530 290 L480 450 L280 420 Z\"><\/path>\n <path d=\"M190 450 L360 360 L500 390\"><\/path>\n <\/g>\n <g fill=\"#9f2f20\"><circle cx=\"200\" cy=\"300\" r=\"8\"><\/circle><circle cx=\"360\" cy=\"360\" r=\"8\"><\/circle><circle cx=\"530\" cy=\"290\" r=\"8\"><\/circle><circle cx=\"480\" cy=\"450\" r=\"8\"><\/circle><circle cx=\"280\" cy=\"420\" r=\"8\"><\/circle><circle cx=\"190\" cy=\"450\" r=\"8\"><\/circle><circle cx=\"500\" cy=\"390\" r=\"8\"><\/circle><\/g>\n <g fill=\"#d8c8a9\" stroke=\"#3e2d20\" stroke-width=\"3\">\n <rect x=\"170\" y=\"275\" width=\"110\" height=\"76\" transform=\"rotate(-5 170 275)\"><\/rect><rect x=\"330\" y=\"270\" width=\"120\" height=\"76\" transform=\"rotate(4 330 270)\"><\/rect><rect x=\"430\" y=\"385\" width=\"120\" height=\"78\" transform=\"rotate(-4 430 385)\"><\/rect><rect x=\"225\" y=\"400\" width=\"98\" height=\"66\" transform=\"rotate(3 225 400)\"><\/rect>\n <\/g>\n <g fill=\"#13212b\"><circle cx=\"225\" cy=\"308\" r=\"18\"><\/circle><rect x=\"205\" y=\"328\" width=\"42\" height=\"15\"><\/rect><rect x=\"360\" y=\"290\" width=\"60\" height=\"40\"><\/rect><path d=\"M455 450 h72 l-36 -42 z\"><\/path><\/g>\n <\/g>\n <ellipse cx=\"120\" cy=\"160\" rx=\"210\" ry=\"180\" fill=\"url(#lampGlow)\"><\/ellipse>\n <g stroke=\"#2a2a2a\" stroke-width=\"18\" fill=\"none\"><path d=\"M20 10 L100 115 L160 210\"><\/path><\/g>\n <path d=\"M70 120 Q130 75 205 120 L190 170 Q110 190 55 160 Z\" fill=\"#17191a\" stroke=\"#4f4f4f\" stroke-width=\"5\"><\/path>\n <circle cx=\"130\" cy=\"150\" r=\"46\" fill=\"#f4c66c\" opacity=\".3\"><\/circle>\n <g transform=\"translate(70 580)\">\n <rect x=\"0\" y=\"75\" width=\"360\" height=\"140\" rx=\"25\" fill=\"#111\"><\/rect>\n <rect x=\"50\" y=\"20\" width=\"260\" height=\"95\" rx=\"15\" fill=\"#1b1b1b\"><\/rect>\n <g fill=\"#d4b77d\"><circle cx=\"50\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"85\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"120\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"155\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"190\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"225\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"260\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"295\" cy=\"150\" r=\"13\"><\/circle><\/g>\n <rect x=\"92\" y=\"0\" width=\"185\" height=\"70\" fill=\"#ded0b4\" transform=\"rotate(-2 92 0)\"><\/rect>\n <text x=\"115\" y=\"30\" font-family=\"Georgia\" font-size=\"17\" fill=\"#18120c\">THE TRUTH IS<\/text><text x=\"115\" y=\"53\" font-family=\"Georgia\" font-size=\"17\" fill=\"#18120c\">WORTH PURSUING.<\/text>\n <\/g>\n <g transform=\"translate(430 635)\">\n <rect x=\"0\" y=\"0\" width=\"210\" height=\"150\" rx=\"12\" fill=\"#d6c7a8\" stroke=\"#8e724e\" stroke-width=\"4\"><\/rect>\n <line x1=\"22\" y1=\"28\" x2=\"185\" y2=\"28\" stroke=\"#7e6b50\" stroke-width=\"2\"><\/line><line x1=\"22\" y1=\"55\" x2=\"185\" y2=\"55\" stroke=\"#7e6b50\" stroke-width=\"2\"><\/line><line x1=\"22\" y1=\"82\" x2=\"185\" y2=\"82\" stroke=\"#7e6b50\" stroke-width=\"2\"><\/line>\n <text x=\"28\" y=\"48\" font-family=\"Georgia\" font-size=\"18\" fill=\"#21170e\">\u2713 Investigate<\/text><text x=\"28\" y=\"75\" font-family=\"Georgia\" font-size=\"18\" fill=\"#21170e\">\u2713 Question<\/text><text x=\"28\" y=\"102\" font-family=\"Georgia\" font-size=\"18\" fill=\"#21170e\">\u2713 Verify<\/text><text x=\"28\" y=\"129\" font-family=\"Georgia\" font-size=\"18\" fill=\"#21170e\">\u2713 Report<\/text>\n <\/g>\n <g transform=\"translate(675 595)\">\n <rect width=\"235\" height=\"135\" rx=\"10\" fill=\"#9e7040\" transform=\"rotate(-4 0 0)\"><\/rect><rect x=\"25\" y=\"16\" width=\"225\" height=\"130\" rx=\"8\" fill=\"#b88950\" transform=\"rotate(2 25 16)\"><\/rect><text x=\"65\" y=\"85\" font-family=\"Impact\" font-size=\"30\" fill=\"#8f211d\" transform=\"rotate(-4 65 85)\">CONFIDENTIAL<\/text>\n <\/g>\n <g transform=\"translate(585 600)\">\n <ellipse cx=\"0\" cy=\"0\" rx=\"58\" ry=\"38\" fill=\"#151515\"><\/ellipse><rect x=\"-58\" y=\"0\" width=\"116\" height=\"90\" fill=\"#191919\"><\/rect><ellipse cx=\"0\" cy=\"90\" rx=\"58\" ry=\"22\" fill=\"#0b0b0b\"><\/ellipse><text x=\"-38\" y=\"40\" font-family=\"Arial\" font-size=\"16\" fill=\"#d0b789\">QUESTION<\/text><text x=\"-40\" y=\"62\" font-family=\"Arial\" font-size=\"16\" fill=\"#d0b789\">EVERYTHING<\/text>\n <\/g>\n <\/svg>\n <div class=\"hero-copy\">\n <div class=\"kicker\">Classroom investigation game<\/div>\n <h1>Investigative <span>Journalist Challenge<\/span><\/h1>\n <p class=\"hero-sub\">Expose the truth. Ask the right questions. Protect your sources. Verify every claim.<\/p>\n <\/div>\n <div class=\"hero-bottom\">\n <div class=\"rules-card\">\n <strong>Scoring rules<\/strong>\n <div class=\"rules-row\">\n <span class=\"pill-score\"><b>+3<\/b> Correct on the first try<\/span>\n <span class=\"pill-score bad\"><b>\u22121<\/b> Each wrong attempt<\/span>\n <\/div>\n <\/div>\n <button class=\"start-big\" data-go=\"mission1\">Start investigation<\/button>\n <\/div>\n <\/section>\n\n <aside class=\"menu-pane\">\n <div class=\"menu-heading\">Choose a mission<\/div>\n <button class=\"mission-card\" style=\"--accent:var(--green)\" data-go=\"mission1\" data-mission=\"1\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><path d=\"M13 51c4-9 11-14 19-14s15 5 19 14\"><\/path><circle cx=\"32\" cy=\"24\" r=\"11\"><\/circle><path d=\"M14 19h36M22 11h20l5 8H17z\"><\/path><\/svg>\n <\/span>\n <span><small>Mission 1<\/small><h3>Meet the whistleblower<\/h3><p>Make first contact. Earn their trust.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n\n <button class=\"mission-card\" style=\"--accent:var(--blue)\" data-go=\"mission2\" data-mission=\"2\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\"><svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><rect x=\"10\" y=\"10\" width=\"30\" height=\"40\" rx=\"3\"><\/rect><path d=\"M16 18h18M16 26h12M16 34h16\"><\/path><circle cx=\"43\" cy=\"40\" r=\"12\"><\/circle><path d=\"m52 49 7 7\"><\/path><\/svg><\/span>\n <span><small>Mission 2<\/small><h3>Analyze the evidence<\/h3><p>Examine documents. Find the strongest proof.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n\n <button class=\"mission-card\" style=\"--accent:var(--purple)\" data-go=\"mission3\" data-mission=\"3\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\"><svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><rect x=\"14\" y=\"28\" width=\"36\" height=\"28\" rx=\"5\"><\/rect><path d=\"M22 28V18a10 10 0 0 1 20 0v10\"><\/path><circle cx=\"32\" cy=\"41\" r=\"4\"><\/circle><path d=\"M32 45v6\"><\/path><\/svg><\/span>\n <span><small>Mission 3<\/small><h3>Protect your source<\/h3><p>Keep confidential information safe.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n\n <button class=\"mission-card\" style=\"--accent:var(--teal)\" data-go=\"mission4\" data-mission=\"4\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\"><svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><path d=\"M8 54h48M14 50V28M24 50V28M40 50V28M50 50V28M8 28h48L32 10z\"><\/path><\/svg><\/span>\n <span><small>Mission 4<\/small><h3>Public interest or national security?<\/h3><p>Balance the right to know with the risks.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n\n <button class=\"mission-card\" style=\"--accent:var(--orange)\" data-go=\"mission5\" data-mission=\"5\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\"><svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><path d=\"M8 18h18l5 7h25v28H8z\"><\/path><path d=\"M8 25h48\"><\/path><\/svg><\/span>\n <span><small>Final mission<\/small><h3>Historical cases<\/h3><p>Answer three multiple-choice questions about famous investigations.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n <\/aside>\n <\/div>\n <\/main>\n\n \n <section id=\"mission1\" class=\"screen mission-screen\" style=\"--accent:var(--green)\" aria-label=\"Mission 1\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\">\n <div class=\"mission-number\">1<\/div>\n <div><h2><span>Mission 1:<\/span> Meet the whistleblower<\/h2><p>You receive a message from a whistleblower. What do you do?<\/p><\/div>\n <\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n <div class=\"m1-layout\">\n <article class=\"paper source-note\">\n \u201cI have documents proving that the government wants to erase a culture from public institutions, schools and public events.<br><br>This is not right.<br><br><strong>Meet me. Trust no one.<\/strong>\u201d\n <\/article>\n <div class=\"alley-scene\">\n <svg viewBox=\"0 0 900 520\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Journalist meeting an anonymous source in a rainy alley\">\n <defs><linearGradient id=\"alleyBg\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop stop-color=\"#0d1c29\"><\/stop><stop offset=\"1\" stop-color=\"#05080b\"><\/stop><\/linearGradient><radialGradient id=\"streetGlow\"><stop stop-color=\"#ffd78e\" stop-opacity=\".8\"><\/stop><stop offset=\"1\" stop-color=\"#ffd78e\" stop-opacity=\"0\"><\/stop><\/radialGradient><\/defs>\n <rect width=\"900\" height=\"520\" fill=\"url(#alleyBg)\"><\/rect>\n <path d=\"M0 0h250l130 520H0zM900 0H650L520 520h380z\" fill=\"#151719\"><\/path>\n <g stroke=\"#313335\" stroke-width=\"4\" opacity=\".8\"><path d=\"M40 30 210 0M22 90l200-30M0 165l245-45M878 40 690 0M900 120 675 70M900 210 650 140\"><\/path><\/g>\n <ellipse cx=\"530\" cy=\"210\" rx=\"230\" ry=\"200\" fill=\"url(#streetGlow)\"><\/ellipse>\n <path d=\"M0 470 Q450 390 900 470V520H0z\" fill=\"#0a1116\"><\/path>\n <g opacity=\".45\" stroke=\"#9fc7db\" stroke-width=\"2\"><path d=\"M120 0l30 520M210 0l50 520M350 0l20 520M480 0l-15 520M610 0l-30 520M760 0l-50 520\"><\/path><\/g>\n <g transform=\"translate(360 135)\">\n <path d=\"M80 15q45 3 68 40l22 190H15l20-188Q47 20 80 15z\" fill=\"#0b0e11\"><\/path>\n <path d=\"M43 55q37-45 80 0l-10 42H55z\" fill=\"#111820\"><\/path>\n <circle cx=\"83\" cy=\"73\" r=\"22\" fill=\"#111\"><\/circle>\n <path d=\"M30 138q45 20 100 0\" stroke=\"#2f3940\" stroke-width=\"10\"><\/path>\n <path d=\"M108 160l85 42\" stroke=\"#111\" stroke-width=\"23\" stroke-linecap=\"round\"><\/path>\n <\/g>\n <g transform=\"translate(575 135)\">\n <circle cx=\"75\" cy=\"60\" r=\"35\" fill=\"#c08e69\"><\/circle>\n <path d=\"M45 38q35-36 70 2v34q-12-28-70-10z\" fill=\"#251a15\"><\/path>\n <path d=\"M26 108q50-25 98 0l22 160H0z\" fill=\"#18232a\"><\/path>\n <path d=\"M28 145l-85 57\" stroke=\"#18232a\" stroke-width=\"22\" stroke-linecap=\"round\"><\/path>\n <path d=\"M0 140l-75 52\" stroke=\"#c08e69\" stroke-width=\"13\" stroke-linecap=\"round\"><\/path>\n <\/g>\n <g transform=\"translate(500 315) rotate(-8)\"><rect width=\"150\" height=\"92\" rx=\"6\" fill=\"#b88950\" stroke=\"#7e542a\" stroke-width=\"4\"><\/rect><path d=\"M0 0l75 50L150 0\" fill=\"#c59a63\"><\/path><\/g>\n <g transform=\"translate(420 0)\"><rect x=\"0\" y=\"0\" width=\"10\" height=\"180\" fill=\"#222\"><\/rect><path d=\"M-40 20h90l-15 55h-60z\" fill=\"#1e2022\"><\/path><circle cx=\"5\" cy=\"62\" r=\"34\" fill=\"#ffd383\" opacity=\".45\"><\/circle><\/g>\n <text x=\"710\" y=\"120\" fill=\"#e7dfcf\" font-size=\"32\" font-family=\"Impact\">TRUTH<\/text><text x=\"700\" y=\"155\" fill=\"#e7dfcf\" font-size=\"32\" font-family=\"Impact\">MATTERS<\/text>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"choice-grid\" data-question=\"m1\">\n <button class=\"choice-btn\" data-value=\"A\"><span class=\"choice-letter\">A<\/span><span>Publish immediately.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"B\"><span class=\"choice-letter\">B<\/span><span>Verify the documents.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"C\"><span class=\"choice-letter\">C<\/span><span>Ignore the source.<\/span><\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback-m1\"><div><strong><\/strong><span><\/span><\/div><button class=\"next-btn\" data-go=\"mission2\">Next mission \u2192<\/button><\/div>\n <div class=\"mission-nav\"><button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button><button class=\"ghost-btn\" data-go=\"mission2\">Skip to mission 2 \u2192<\/button><\/div>\n <\/section>\n\n \n <section id=\"mission2\" class=\"screen mission-screen\" style=\"--accent:var(--blue)\" aria-label=\"Mission 2\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\"><div class=\"mission-number\">2<\/div><div><h2><span>Mission 2:<\/span> Analyze the evidence<\/h2><p>Read and check the documents below. Which one could be a strong proof?<\/p><\/div><\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n <div class=\"evidence-grid\" data-question=\"m2\">\n <button class=\"evidence\" data-value=\"A\">\n <span class=\"doc-tab\">DOCUMENT A<\/span>\n <div class=\"evidence-visual\">\n <svg viewBox=\"0 0 500 310\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Politician speaking to protesters\">\n <rect width=\"500\" height=\"310\" fill=\"#8c9397\"><\/rect>\n <rect y=\"0\" width=\"500\" height=\"170\" fill=\"#bfc3c2\"><\/rect>\n <g fill=\"#5c6264\"><rect x=\"50\" y=\"0\" width=\"45\" height=\"180\"><\/rect><rect x=\"145\" y=\"0\" width=\"45\" height=\"180\"><\/rect><rect x=\"240\" y=\"0\" width=\"45\" height=\"180\"><\/rect><rect x=\"335\" y=\"0\" width=\"45\" height=\"180\"><\/rect><\/g>\n <g fill=\"#20272b\"><circle cx=\"80\" cy=\"220\" r=\"25\"><\/circle><circle cx=\"145\" cy=\"210\" r=\"24\"><\/circle><circle cx=\"225\" cy=\"220\" r=\"28\"><\/circle><circle cx=\"410\" cy=\"215\" r=\"25\"><\/circle><\/g>\n <g fill=\"#c9b99b\"><rect x=\"20\" y=\"130\" width=\"90\" height=\"60\" transform=\"rotate(-7 20 130)\"><\/rect><rect x=\"115\" y=\"125\" width=\"85\" height=\"60\" transform=\"rotate(5 115 125)\"><\/rect><rect x=\"360\" y=\"135\" width=\"100\" height=\"62\" transform=\"rotate(-4 360 135)\"><\/rect><\/g>\n <g transform=\"translate(270 50)\"><circle cx=\"70\" cy=\"70\" r=\"38\" fill=\"#c59a75\"><\/circle><path d=\"M37 59q32-55 68-5v26q-10-24-68-5z\" fill=\"#6c706f\"><\/path><path d=\"M20 122q55-30 100 0l18 150H0z\" fill=\"#2c3843\"><\/path><path d=\"M48 122h45l-12 34H60z\" fill=\"#f2f1ed\"><\/path><path d=\"M70 156l8 85\" stroke=\"#9c422a\" stroke-width=\"9\"><\/path><path d=\"M24 158l-70 40M109 158l66 25\" stroke=\"#c59a75\" stroke-width=\"16\" stroke-linecap=\"round\"><\/path><\/g>\n <\/svg>\n <\/div>\n <div class=\"caption-slip\">Photo taken: 05\/03\/2013<br>Location: Parliament Grounds<\/div>\n <p class=\"evidence-summary\">A picture of the Prime Minister talking to protesters outside Parliament.<\/p>\n <\/button>\n <button class=\"evidence\" data-value=\"B\">\n <span class=\"doc-tab\">DOCUMENT B<\/span>\n <div class=\"evidence-visual\">\n <svg viewBox=\"0 0 500 310\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Politician posing with a community campaigner\">\n <rect width=\"500\" height=\"310\" fill=\"#143762\"><\/rect>\n <text x=\"300\" y=\"55\" fill=\"#d6e1ef\" opacity=\".7\" font-size=\"28\" font-family=\"Arial\">A fairer future<\/text>\n <g transform=\"translate(55 30)\"><circle cx=\"100\" cy=\"80\" r=\"42\" fill=\"#c59a75\"><\/circle><path d=\"M58 68q28-50 75-10v25q-14-22-75-7z\" fill=\"#6d7070\"><\/path><path d=\"M38 130q65-30 122 0l10 160H20z\" fill=\"#2b3742\"><\/path><path d=\"M85 130h35l-7 42H95z\" fill=\"#f0eee7\"><\/path><path d=\"M100 172l5 90\" stroke=\"#9f3f2b\" stroke-width=\"8\"><\/path><\/g>\n <g transform=\"translate(260 38)\"><circle cx=\"80\" cy=\"80\" r=\"40\" fill=\"#9f6c4e\"><\/circle><path d=\"M45 65q35-52 72-3v25q-18-19-72-5z\" fill=\"#221916\"><\/path><path d=\"M25 135q60-35 115 0l15 155H10z\" fill=\"#20252a\"><\/path><circle cx=\"82\" cy=\"195\" r=\"42\" fill=\"none\" stroke=\"#e6e6e6\" stroke-width=\"6\"><\/circle><circle cx=\"67\" cy=\"185\" r=\"9\" fill=\"#e6e6e6\"><\/circle><circle cx=\"97\" cy=\"185\" r=\"9\" fill=\"#e6e6e6\"><\/circle><path d=\"M55 220q28-22 54 0\" stroke=\"#e6e6e6\" stroke-width=\"7\"><\/path><\/g>\n <\/svg>\n <\/div>\n <div class=\"caption-slip\">Photo taken: Unknown date<br>Location: Unknown<\/div>\n <p class=\"evidence-summary\">A picture of the Prime Minister with a community campaigner at a public event.<\/p>\n <\/button>\n <button class=\"evidence\" data-value=\"C\">\n <span class=\"doc-tab\">DOCUMENT C<\/span>\n <div class=\"contract-doc\">\n <h4>CONFIDENTIAL AGREEMENT<\/h4>\n <p><strong>AGREEMENT BETWEEN THE GOVERNMENT AND THE NATIONAL ADVISORY COUNCIL<\/strong><\/p>\n <p>This agreement is made on 02\/06\/2026 between the Government and the Council.<\/p>\n <p><strong>1. Purpose<\/strong><br>The parties agree to implement the measures described in this agreement throughout public institutions and events.<\/p>\n <p><strong>2. Commitments<\/strong><br>The Government and the Council agree to carry out the attached schedule.<\/p>\n <p><strong>3. Confidentiality<\/strong><br>The terms must not be disclosed without prior consent, except where required by law.<\/p>\n <p style=\"margin-top:24px\">Signed for the Government Signed for the Council<\/p>\n <div class=\"stamp\">CONFIDENTIAL<\/div>\n <\/div>\n <div class=\"caption-slip\">Signed: 02\/06\/2026<\/div>\n <p class=\"evidence-summary\">A signed confidential agreement between the Government and a national advisory council.<\/p>\n <\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback-m2\"><div><strong><\/strong><span><\/span><\/div><button class=\"next-btn\" data-go=\"mission3\">Next mission \u2192<\/button><\/div>\n <div class=\"mission-nav\"><button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button><button class=\"solid-btn\" id=\"submitEvidence\">Submit selected document<\/button><\/div>\n <\/section>\n\n \n <section id=\"mission3\" class=\"screen mission-screen\" style=\"--accent:var(--purple)\" aria-label=\"Mission 3\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\"><div class=\"mission-number\">3<\/div><div><h2><span>Mission 3:<\/span> Protect your source<\/h2><p>The authorities ask you to reveal your source. What should an investigative journalist do?<\/p><\/div><\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n <div class=\"desk-scene\">\n <svg viewBox=\"0 0 1400 520\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Confidential folder, padlock, anonymous source photo, phone and USB drive\">\n <defs><linearGradient id=\"deskWood\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop stop-color=\"#2c170d\"><\/stop><stop offset=\".55\" stop-color=\"#5b341f\"><\/stop><stop offset=\"1\" stop-color=\"#1c0f0a\"><\/stop><\/linearGradient><radialGradient id=\"lamp2\"><stop stop-color=\"#ffd384\" stop-opacity=\".6\"><\/stop><stop offset=\"1\" stop-color=\"#ffd384\" stop-opacity=\"0\"><\/stop><\/radialGradient><\/defs>\n <rect width=\"1400\" height=\"520\" fill=\"url(#deskWood)\"><\/rect>\n <ellipse cx=\"1160\" cy=\"90\" rx=\"300\" ry=\"230\" fill=\"url(#lamp2)\"><\/ellipse>\n <g transform=\"translate(80 110) rotate(-4)\"><rect width=\"610\" height=\"300\" rx=\"10\" fill=\"#8b653d\" stroke=\"#4f351f\" stroke-width=\"7\"><\/rect><rect x=\"20\" y=\"-18\" width=\"230\" height=\"60\" rx=\"10\" fill=\"#9d7446\"><\/rect><text x=\"70\" y=\"185\" fill=\"#492955\" font-size=\"64\" font-family=\"Impact\">CONFIDENTIAL<\/text><\/g>\n <g transform=\"translate(520 110)\"><path d=\"M30 120v-55a70 70 0 0 1 140 0v55\" fill=\"none\" stroke=\"#d3c3a8\" stroke-width=\"24\"><\/path><rect x=\"0\" y=\"110\" width=\"205\" height=\"190\" rx=\"18\" fill=\"#22262a\" stroke=\"#6c4a85\" stroke-width=\"10\"><\/rect><circle cx=\"102\" cy=\"195\" r=\"22\" fill=\"#b99bd2\"><\/circle><rect x=\"94\" y=\"205\" width=\"16\" height=\"50\" fill=\"#b99bd2\"><\/rect><\/g>\n <g transform=\"translate(760 85) rotate(5)\"><rect width=\"330\" height=\"230\" fill=\"#ded3bf\" stroke=\"#272421\" stroke-width=\"8\"><\/rect><rect x=\"18\" y=\"18\" width=\"294\" height=\"194\" fill=\"#111a21\"><\/rect><circle cx=\"165\" cy=\"95\" r=\"52\" fill=\"#0b0f12\"><\/circle><path d=\"M90 190q80-120 150 0\" fill=\"#0b0f12\"><\/path><circle cx=\"165\" cy=\"92\" r=\"24\" fill=\"#1f2428\"><\/circle><\/g>\n <g transform=\"translate(1110 85) rotate(8)\"><rect width=\"165\" height=\"285\" rx=\"28\" fill=\"#11171c\" stroke=\"#4c5155\" stroke-width=\"8\"><\/rect><circle cx=\"82\" cy=\"90\" r=\"34\" fill=\"#27333c\"><\/circle><text x=\"42\" y=\"145\" fill=\"#8da0ad\" font-family=\"Arial\" font-size=\"20\">UNKNOWN<\/text><circle cx=\"52\" cy=\"230\" r=\"22\" fill=\"#267544\"><\/circle><circle cx=\"115\" cy=\"230\" r=\"22\" fill=\"#8f2f2b\"><\/circle><\/g>\n <g transform=\"translate(860 365) rotate(-8)\"><rect width=\"250\" height=\"92\" rx=\"18\" fill=\"#252a2e\" stroke=\"#73777a\" stroke-width=\"5\"><\/rect><rect x=\"-62\" y=\"20\" width=\"70\" height=\"52\" rx=\"4\" fill=\"#bfc3c4\"><\/rect><circle cx=\"212\" cy=\"46\" r=\"18\" fill=\"none\" stroke=\"#888\" stroke-width=\"7\"><\/circle><\/g>\n <g transform=\"translate(1180 330) rotate(5)\"><rect width=\"175\" height=\"150\" fill=\"#d8c8aa\"><\/rect><text x=\"20\" y=\"30\" fill=\"#2d2419\" font-size=\"18\" font-family=\"Georgia\">Notes<\/text><text x=\"20\" y=\"62\" fill=\"#2d2419\" font-size=\"16\" font-family=\"Georgia\">\u2022 Meeting<\/text><text x=\"20\" y=\"86\" fill=\"#2d2419\" font-size=\"16\" font-family=\"Georgia\">\u2022 8pm<\/text><text x=\"20\" y=\"110\" fill=\"#2d2419\" font-size=\"16\" font-family=\"Georgia\">\u2022 Location<\/text><\/g>\n <g transform=\"translate(1100 -30)\"><path d=\"M0 0h250l-40 115H40z\" fill=\"#17191a\"><\/path><circle cx=\"130\" cy=\"70\" r=\"80\" fill=\"#ffd384\" opacity=\".3\"><\/circle><\/g>\n <\/svg>\n <\/div>\n <div class=\"choice-grid\" data-question=\"m3\">\n <button class=\"choice-btn\" data-value=\"A\"><span class=\"choice-letter\">A<\/span><span>Protect confidential sources.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"B\"><span class=\"choice-letter\">B<\/span><span>Reveal everything immediately.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"C\"><span class=\"choice-letter\">C<\/span><span>Delete the investigation.<\/span><\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback-m3\"><div><strong><\/strong><span><\/span><\/div><button class=\"next-btn\" data-go=\"mission4\">Next mission \u2192<\/button><\/div>\n <div class=\"mission-nav\"><button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button><button class=\"ghost-btn\" data-go=\"mission4\">Skip to mission 4 \u2192<\/button><\/div>\n <\/section>\n\n \n <section id=\"mission4\" class=\"screen mission-screen\" style=\"--accent:var(--teal)\" aria-label=\"Mission 4\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\"><div class=\"mission-number\">4<\/div><div><h2><span>Mission 4:<\/span> Public interest or national security?<\/h2><p>This is the crucial decision.<\/p><\/div><\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n <div class=\"m4-layout\">\n <article class=\"paper decision-copy\"><strong>What should you publish?<\/strong>The government says publishing these documents could threaten national security.<br><br>But the documents reveal abuses of power.<br><br>Choose the most responsible option.<\/article>\n <div class=\"crowd-scene\">\n <svg viewBox=\"0 0 1000 540\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Laptop with documents overlooking a government building and public demonstration\">\n <defs><linearGradient id=\"storm\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop stop-color=\"#24313c\"><\/stop><stop offset=\"1\" stop-color=\"#071016\"><\/stop><\/linearGradient><linearGradient id=\"desk4\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop stop-color=\"#5a341d\"><\/stop><stop offset=\"1\" stop-color=\"#22120b\"><\/stop><\/linearGradient><\/defs>\n <rect width=\"1000\" height=\"540\" fill=\"url(#storm)\"><\/rect>\n <path d=\"M340 270h330V120l-165-90-165 90z\" fill=\"#353b40\" stroke=\"#81898c\" stroke-width=\"6\"><\/path><path d=\"M305 275h400v30H305zM365 135h45v135h-45zM455 135h45v135h-45zM545 135h45v135h-45zM635 135h45v135h-45z\" fill=\"#282c2f\"><\/path>\n <g fill=\"#cfb275\"><rect x=\"380\" y=\"160\" width=\"12\" height=\"25\"><\/rect><rect x=\"470\" y=\"160\" width=\"12\" height=\"25\"><\/rect><rect x=\"560\" y=\"160\" width=\"12\" height=\"25\"><\/rect><rect x=\"650\" y=\"160\" width=\"12\" height=\"25\"><\/rect><\/g>\n <g fill=\"#101417\"><circle cx=\"140\" cy=\"330\" r=\"28\"><\/circle><circle cx=\"210\" cy=\"340\" r=\"26\"><\/circle><circle cx=\"285\" cy=\"330\" r=\"31\"><\/circle><circle cx=\"710\" cy=\"335\" r=\"28\"><\/circle><circle cx=\"785\" cy=\"340\" r=\"27\"><\/circle><circle cx=\"860\" cy=\"330\" r=\"30\"><\/circle><\/g>\n <g fill=\"#d8c7a6\"><rect x=\"115\" y=\"240\" width=\"110\" height=\"70\" transform=\"rotate(-5 115 240)\"><\/rect><rect x=\"730\" y=\"235\" width=\"120\" height=\"75\" transform=\"rotate(4 730 235)\"><\/rect><rect x=\"830\" y=\"250\" width=\"100\" height=\"65\" transform=\"rotate(-4 830 250)\"><\/rect><\/g>\n <text x=\"132\" y=\"268\" fill=\"#17120e\" font-family=\"Impact\" font-size=\"20\">TRUTH<\/text><text x=\"135\" y=\"294\" fill=\"#17120e\" font-family=\"Impact\" font-size=\"20\">MATTERS<\/text><text x=\"744\" y=\"265\" fill=\"#17120e\" font-family=\"Impact\" font-size=\"18\">TRANSPARENCY<\/text><text x=\"770\" y=\"291\" fill=\"#17120e\" font-family=\"Impact\" font-size=\"18\">NOW<\/text>\n <rect y=\"360\" width=\"1000\" height=\"180\" fill=\"url(#desk4)\"><\/rect>\n <g transform=\"translate(250 280)\"><path d=\"M0 0h500l-35 210H35z\" fill=\"#252c32\" stroke=\"#6b7175\" stroke-width=\"6\"><\/path><rect x=\"45\" y=\"20\" width=\"410\" height=\"150\" fill=\"#15212a\"><\/rect><rect x=\"80\" y=\"45\" width=\"330\" height=\"108\" fill=\"#e2dccd\"><\/rect><g fill=\"#111\"><rect x=\"100\" y=\"62\" width=\"190\" height=\"9\"><\/rect><rect x=\"100\" y=\"82\" width=\"260\" height=\"9\"><\/rect><rect x=\"100\" y=\"102\" width=\"220\" height=\"9\"><\/rect><rect x=\"100\" y=\"122\" width=\"250\" height=\"9\"><\/rect><\/g><text x=\"330\" y=\"70\" fill=\"#a42222\" font-size=\"18\" font-family=\"Impact\">CLASSIFIED<\/text><path d=\"M35 210h430l45 35H-10z\" fill=\"#1c2227\"><\/path><\/g>\n <g transform=\"translate(60 385) rotate(-4)\"><rect width=\"210\" height=\"100\" rx=\"8\" fill=\"#a87945\"><\/rect><text x=\"30\" y=\"58\" fill=\"#8c211d\" font-size=\"30\" font-family=\"Impact\">CONFIDENTIAL<\/text><\/g>\n <g transform=\"translate(790 370)\"><rect width=\"150\" height=\"120\" rx=\"10\" fill=\"#d3c29f\"><\/rect><text x=\"18\" y=\"28\" fill=\"#1f1710\" font-size=\"16\" font-family=\"Georgia\">Investigation Notes<\/text><text x=\"18\" y=\"56\" fill=\"#1f1710\" font-size=\"14\" font-family=\"Georgia\">\u2022 Intimidation<\/text><text x=\"18\" y=\"80\" fill=\"#1f1710\" font-size=\"14\" font-family=\"Georgia\">\u2022 Surveillance<\/text><text x=\"18\" y=\"104\" fill=\"#1f1710\" font-size=\"14\" font-family=\"Georgia\">\u2022 Cover-ups<\/text><\/g>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"choice-grid\" data-question=\"m4\">\n <button class=\"choice-btn\" data-value=\"A\"><span class=\"choice-letter\">A<\/span><span>Publish everything.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"B\"><span class=\"choice-letter\">B<\/span><span>Publish selected, verified information.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"C\"><span class=\"choice-letter\">C<\/span><span>Publish nothing.<\/span><\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback-m4\"><div><strong><\/strong><span><\/span><\/div><button class=\"next-btn\" data-go=\"mission5\">Final mission \u2192<\/button><\/div>\n <div class=\"mission-nav\"><button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button><button class=\"ghost-btn\" data-go=\"mission5\">Skip to final mission \u2192<\/button><\/div>\n <\/section>\n\n \n <section id=\"mission5\" class=\"screen mission-screen\" style=\"--accent:var(--orange)\" aria-label=\"Final mission\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\">\n <div class=\"mission-number\">\u2605<\/div>\n <div>\n <h2><span>Final mission:<\/span> Historical cases<\/h2>\n <p>Choose the correct answer for each investigation.<\/p>\n <\/div>\n <\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n\n <div class=\"historical-quiz\" id=\"historicalQuiz\">\n <article class=\"history-case\" data-case=\"watergate\">\n <span class=\"case-label\">1st case<\/span>\n <h3>Journalists uncovered political spying and a cover-up during a presidential election. What is the name of this scandal?<\/h3>\n <div class=\"case-options\" role=\"group\" aria-label=\"Watergate question\">\n <button class=\"case-option\" type=\"button\" data-value=\"watergate\"><span class=\"option-letter\">A<\/span><span>Watergate scandal<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"twin-towers\"><span class=\"option-letter\">B<\/span><span>Twin Towers<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"muslim-murder\"><span class=\"option-letter\">C<\/span><span>Murder of a Muslim<\/span><\/button>\n <\/div>\n <div class=\"case-status\" aria-live=\"polite\">Select one answer.<\/div>\n <\/article>\n\n <article class=\"history-case\" data-case=\"snowden\">\n <span class=\"case-label\">2nd case<\/span>\n <h3>An American contractor revealed mass-surveillance programs used by the NSA. What is his name?<\/h3>\n <div class=\"case-options\" role=\"group\" aria-label=\"Edward Snowden question\">\n <button class=\"case-option\" type=\"button\" data-value=\"snowden\"><span class=\"option-letter\">A<\/span><span>Edward Snowden<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"assange\"><span class=\"option-letter\">B<\/span><span>Julian Assange<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"george-trump\"><span class=\"option-letter\">C<\/span><span>George Trump<\/span><\/button>\n <\/div>\n <div class=\"case-status\" aria-live=\"polite\">Select one answer.<\/div>\n <\/article>\n\n <article class=\"history-case\" data-case=\"pentagon\">\n <span class=\"case-label\">3rd case \u00b7 final<\/span>\n <h3>Secret military documents about the Vietnam War were leaked to newspapers. What were these documents called?<\/h3>\n <div class=\"case-options\" role=\"group\" aria-label=\"Pentagon Papers question\">\n <button class=\"case-option\" type=\"button\" data-value=\"pentagon\"><span class=\"option-letter\">A<\/span><span>Pentagon Papers<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"walking-post\"><span class=\"option-letter\">B<\/span><span>The Walking Post<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"game-of-dark\"><span class=\"option-letter\">C<\/span><span>The Game of Dark<\/span><\/button>\n <\/div>\n <div class=\"case-status\" aria-live=\"polite\">Select one answer.<\/div>\n <\/article>\n <\/div>\n\n <div class=\"feedback\" id=\"feedback-m5\">\n <div><strong><\/strong><span><\/span><\/div>\n <button class=\"next-btn\" data-go=\"result\">View your medal \u2192<\/button>\n <\/div>\n <div class=\"mission-nav\">\n <button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button>\n <button class=\"solid-btn\" id=\"finishCases\" disabled>Finish case file<\/button>\n <\/div>\n <\/section>\n \n <section id=\"result\" class=\"screen\" aria-label=\"Final result\">\n <div class=\"result-wrap\">\n <article class=\"result-card\">\n <div class=\"medal\" id=\"medalIcon\">\u2605<\/div>\n <div class=\"kicker\">Case file complete<\/div>\n <h2 id=\"medalTitle\">Gold medal<\/h2>\n <div class=\"score\"><span id=\"finalScore\">0<\/span> points<\/div>\n <p id=\"medalMessage\">The truth is uncovered. Well done, investigator.<\/p>\n <div class=\"result-actions\"><button class=\"solid-btn\" data-go=\"home\">Back to missions<\/button><button class=\"ghost-btn\" id=\"playAgain\">Play again<\/button><\/div>\n <\/article>\n <\/div>\n <\/section>\n <\/div>\n\n <div class=\"modal\" id=\"howModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"howTitle\">\n <div class=\"modal-card\">\n <h3 id=\"howTitle\">How to play<\/h3>\n <p>Complete the five missions. Select the answer that best reflects responsible investigative journalism.<\/p>\n <ul>\n <li><strong>+3 points<\/strong> for a correct answer on the first try.<\/li>\n <li><strong>\u22121 point<\/strong> for every wrong attempt.<\/li>\n <li>The final mission contains three multiple-choice questions about historical cases.<\/li>\n <\/ul>\n <p>Your progress is saved automatically in this browser.<\/p>\n <button class=\"solid-btn\" id=\"closeHow\">Start investigating<\/button>\n <\/div>\n <\/div>\n\n <script>\n (() => {\n const answers = {\n m1: { correct: 'B', success: 'Good choice. A responsible journalist verifies documents before publishing.', wrong: 'Not yet. Think about verification and source credibility.' },\n m2: { correct: 'C', success: 'Correct. A signed, dated agreement can be stronger evidence than an undated photograph.', wrong: 'This is not the strongest proof. Check the source, date, context and whether the evidence directly supports the claim.' },\n m3: { correct: 'A', success: 'Correct. Protecting confidential sources is a core principle of investigative journalism.', wrong: 'That choice could endanger the source or destroy the investigation.' },\n m4: { correct: 'B', success: 'Correct. Publishing selected, verified information can serve the public interest while reducing unnecessary harm.', wrong: 'Consider proportionality: inform the public, verify the facts and avoid avoidable harm.' }\n };\n\n const STORAGE_KEY = 'ijc-state-final-qcm-v2';\n const historicalAnswers = {\n watergate: {\n correct: 'watergate',\n explanation: 'Correct. The Watergate scandal began with the 1972 break-in and the political cover-up that followed.'\n },\n snowden: {\n correct: 'snowden',\n explanation: 'Correct. Edward Snowden disclosed classified information about large-scale surveillance programs.'\n },\n pentagon: {\n correct: 'pentagon',\n explanation: 'Correct. The Pentagon Papers were secret documents about United States involvement in the Vietnam War.'\n }\n };\n const defaultState = {\n score: 0,\n completed: { m1:false, m2:false, m3:false, m4:false, m5:false },\n attempts: { m1:0, m2:0, m3:0, m4:0 },\n awarded: { m1:false, m2:false, m3:false, m4:false, m5:false },\n historical: { watergate:false, snowden:false, pentagon:false },\n historicalAttempts: { watergate:0, snowden:0, pentagon:0 },\n sound: true\n };\n\n let state = loadState();\n let selectedEvidence = null;\n\n const screens = [...document.querySelectorAll('.screen')];\n const scoreEls = [...document.querySelectorAll('[data-score]')];\n const soundBtn = document.getElementById('soundBtn');\n const app = document.getElementById('ijc-app');\n const fullscreenBtn = document.getElementById('fullscreenBtn');\n\n function nativeFullscreenElement() {\n return document.fullscreenElement || document.webkitFullscreenElement || null;\n }\n\n function updateFullscreenButton() {\n const active = app.classList.contains('immersive') || nativeFullscreenElement() === app;\n fullscreenBtn.innerHTML = active\n ? '<span aria-hidden=\"true\">\u00d7<\/span> Exit full screen'\n : '<span aria-hidden=\"true\">\u26f6<\/span> Full screen';\n fullscreenBtn.setAttribute('aria-pressed', String(active));\n fullscreenBtn.title = active ? 'Exit full screen' : 'Open the game in full screen';\n }\n\n async function enterImmersive() {\n app.classList.add('immersive');\n document.body.classList.add('ijc-lock');\n updateFullscreenButton();\n\n try {\n if (!nativeFullscreenElement()) {\n if (app.requestFullscreen) {\n await app.requestFullscreen({ navigationUI: 'hide' });\n } else if (app.webkitRequestFullscreen) {\n app.webkitRequestFullscreen();\n }\n }\n } catch (error) {\n \/\/ The fixed-position immersive fallback remains active when an\n \/\/ embedded iframe blocks the native Fullscreen API.\n }\n app.scrollTop = 0;\n window.scrollTo({ top: 0, behavior: 'auto' });\n }\n\n async function exitImmersive() {\n try {\n if (document.fullscreenElement && document.exitFullscreen) {\n await document.exitFullscreen();\n } else if (document.webkitFullscreenElement && document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n }\n } catch (error) {}\n app.classList.remove('immersive');\n document.body.classList.remove('ijc-lock');\n updateFullscreenButton();\n }\n\n function toggleImmersive() {\n const active = app.classList.contains('immersive') || nativeFullscreenElement() === app;\n return active ? exitImmersive() : enterImmersive();\n }\n\n fullscreenBtn.addEventListener('click', toggleImmersive);\n\n function syncFullscreenState() {\n if (!nativeFullscreenElement()) {\n app.classList.remove('immersive');\n document.body.classList.remove('ijc-lock');\n }\n updateFullscreenButton();\n }\n document.addEventListener('fullscreenchange', syncFullscreenState);\n document.addEventListener('webkitfullscreenchange', syncFullscreenState);\n\n function loadState() {\n try {\n const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));\n return saved ? {\n ...defaultState,\n ...saved,\n completed: { ...defaultState.completed, ...(saved.completed || {}) },\n attempts: { ...defaultState.attempts, ...(saved.attempts || {}) },\n awarded: { ...defaultState.awarded, ...(saved.awarded || {}) },\n historical: { ...defaultState.historical, ...(saved.historical || {}) },\n historicalAttempts: { ...defaultState.historicalAttempts, ...(saved.historicalAttempts || {}) }\n } : structuredClone(defaultState);\n } catch { return structuredClone(defaultState); }\n }\n\n function saveState() {\n try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (error) {}\n renderState();\n }\n\n function renderState() {\n scoreEls.forEach(el => el.textContent = state.score);\n document.querySelectorAll('.mission-card').forEach(card => {\n const key = 'm' + card.dataset.mission;\n card.classList.toggle('done', !!state.completed[key]);\n });\n soundBtn.textContent = `Sound: ${state.sound ? 'on' : 'off'}`;\n soundBtn.setAttribute('aria-pressed', String(state.sound));\n renderHistoricalState();\n }\n\n function renderHistoricalState() {\n let solvedCount = 0;\n document.querySelectorAll('.history-case').forEach(caseCard => {\n const id = caseCard.dataset.case;\n const solved = !!state.historical[id];\n if (solved) solvedCount += 1;\n caseCard.classList.toggle('solved', solved);\n const status = caseCard.querySelector('.case-status');\n caseCard.querySelectorAll('.case-option').forEach(option => {\n const correct = option.dataset.value === historicalAnswers[id].correct;\n option.disabled = solved;\n option.classList.toggle('correct', solved && correct);\n if (solved) option.classList.remove('wrong');\n });\n if (solved && status) {\n status.className = 'case-status ok';\n status.textContent = historicalAnswers[id].explanation;\n }\n });\n const finish = document.getElementById('finishCases');\n if (finish) finish.disabled = solvedCount !== Object.keys(historicalAnswers).length || state.completed.m5;\n }\n\n function showScreen(id) {\n screens.forEach(s => s.classList.toggle('active', s.id === id));\n window.scrollTo({top:0, behavior:'smooth'});\n if (id === 'result') renderResult();\n if (state.sound) tone(420, .06);\n }\n\n function tone(freq = 440, duration = .08) {\n if (!state.sound) return;\n try {\n const ctx = new (window.AudioContext || window.webkitAudioContext)();\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.type = 'sine'; osc.frequency.value = freq;\n gain.gain.setValueAtTime(.05, ctx.currentTime);\n gain.gain.exponentialRampToValueAtTime(.0001, ctx.currentTime + duration);\n osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + duration);\n } catch {}\n }\n\n document.addEventListener('click', e => {\n const go = e.target.closest('[data-go]');\n if (!go) return;\n if (go.matches('.start-big, .mission-card') && !app.classList.contains('immersive') && !nativeFullscreenElement()) {\n enterImmersive();\n }\n showScreen(go.dataset.go);\n });\n\n document.querySelectorAll('.choice-grid[data-question]').forEach(grid => {\n const q = grid.dataset.question;\n grid.addEventListener('click', e => {\n const btn = e.target.closest('.choice-btn');\n if (!btn || state.completed[q]) return;\n state.attempts[q] += 1;\n const isCorrect = btn.dataset.value === answers[q].correct;\n grid.querySelectorAll('.choice-btn').forEach(b => b.classList.remove('selected','wrong','correct'));\n btn.classList.add(isCorrect ? 'correct' : 'wrong');\n if (isCorrect) completeQuestion(q, grid, btn);\n else {\n state.score -= 1;\n saveState();\n showFeedback(q, false, answers[q].wrong);\n tone(170, .12);\n }\n });\n });\n\n function completeQuestion(q, grid, btn) {\n if (!state.awarded[q]) {\n state.score += state.attempts[q] === 1 ? 3 : 0;\n state.awarded[q] = true;\n }\n state.completed[q] = true;\n grid.querySelectorAll('button').forEach(b => b.disabled = true);\n btn.classList.add('correct');\n saveState();\n showFeedback(q, true, answers[q].success);\n tone(780, .15);\n }\n\n function showFeedback(q, ok, text) {\n const box = document.getElementById('feedback-' + q);\n if (!box) return;\n box.querySelector('strong').textContent = ok ? 'Correct! ' : 'Try again. ';\n box.querySelector('span').textContent = text;\n box.classList.add('show');\n }\n\n \/\/ Mission 2 evidence selection\n document.querySelectorAll('#mission2 .evidence').forEach(el => {\n el.addEventListener('click', () => {\n if (state.completed.m2) return;\n selectedEvidence = el.dataset.value;\n document.querySelectorAll('#mission2 .evidence').forEach(x => x.classList.toggle('selected', x === el));\n });\n });\n\n document.getElementById('submitEvidence').addEventListener('click', () => {\n if (state.completed.m2) return;\n if (!selectedEvidence) {\n showFeedback('m2', false, 'Select one document first.');\n return;\n }\n state.attempts.m2 += 1;\n const chosen = document.querySelector(`#mission2 .evidence[data-value=\"${selectedEvidence}\"]`);\n const isCorrect = selectedEvidence === answers.m2.correct;\n if (isCorrect) {\n if (!state.awarded.m2) {\n state.score += state.attempts.m2 === 1 ? 3 : 0;\n state.awarded.m2 = true;\n }\n state.completed.m2 = true;\n chosen.classList.add('selected');\n document.querySelectorAll('#mission2 .evidence').forEach(x => x.disabled = true);\n saveState();\n showFeedback('m2', true, answers.m2.success);\n tone(780, .15);\n } else {\n state.score -= 1;\n saveState();\n chosen.classList.remove('selected');\n selectedEvidence = null;\n showFeedback('m2', false, answers.m2.wrong);\n tone(170, .12);\n }\n });\n\n \/\/ Final historical multiple-choice mission\n document.querySelectorAll('.history-case').forEach(caseCard => {\n caseCard.addEventListener('click', event => {\n const option = event.target.closest('.case-option');\n if (!option || state.completed.m5) return;\n\n const caseId = caseCard.dataset.case;\n if (state.historical[caseId]) return;\n\n const answer = historicalAnswers[caseId];\n const status = caseCard.querySelector('.case-status');\n state.historicalAttempts[caseId] += 1;\n caseCard.querySelectorAll('.case-option').forEach(button => button.classList.remove('wrong'));\n\n if (option.dataset.value === answer.correct) {\n state.historical[caseId] = true;\n if (state.historicalAttempts[caseId] === 1) state.score += 1;\n option.classList.add('correct');\n caseCard.classList.add('solved');\n caseCard.querySelectorAll('.case-option').forEach(button => button.disabled = true);\n status.className = 'case-status ok';\n status.textContent = answer.explanation;\n tone(720, .12);\n } else {\n state.score -= 1;\n option.classList.add('wrong');\n status.className = 'case-status error';\n status.textContent = 'Incorrect. Check the historical clue and try again.';\n setTimeout(() => option.classList.remove('wrong'), 650);\n tone(160, .1);\n }\n\n saveState();\n });\n });\n\n document.getElementById('finishCases').addEventListener('click', () => {\n const complete = Object.values(state.historical).every(Boolean);\n if (!complete || state.completed.m5) return;\n state.completed.m5 = true;\n state.awarded.m5 = true;\n saveState();\n showFeedback('m5', true, 'All three historical questions are correct. The case file is complete.');\n tone(900, .2);\n });\n\n function renderResult() {\n const score = state.score;\n document.getElementById('finalScore').textContent = score;\n let title, message, icon, bg;\n if (score >= 13) {\n title = 'Gold medal'; icon = '\u2605'; bg = 'radial-gradient(circle at 35% 30%, #fff1aa, #d29a24 45%, #8d5511 72%)';\n message = 'You are a sharp and resourceful investigative journalist.';\n } else if (score >= 10) {\n title = 'Silver medal'; icon = '\u2605'; bg = 'radial-gradient(circle at 35% 30%, #fff, #aab2b8 45%, #5d666d 72%)';\n message = 'You are on the right path to becoming a great investigative journalist.';\n } else if (score >= 6) {\n title = 'Bronze medal'; icon = '\u2605'; bg = 'radial-gradient(circle at 35% 30%, #ffd0a3, #b66c2f 45%, #6c3418 72%)';\n message = 'You have the essentials. Keep building your verification and judgement skills.';\n } else {\n title = 'Keep investigating'; icon = '\u2726'; bg = 'radial-gradient(circle at 35% 30%, #8fc0d5, #365a69 50%, #182b34 75%)';\n message = 'Review the missions and try again. Good journalism takes practice.';\n }\n const medal = document.getElementById('medalIcon');\n medal.textContent = icon; medal.style.background = bg;\n document.getElementById('medalTitle').textContent = title;\n document.getElementById('medalMessage').textContent = message;\n }\n\n function resetGame() {\n state = structuredClone(defaultState);\n selectedEvidence = null;\n try {\n localStorage.removeItem(STORAGE_KEY);\n localStorage.removeItem('ijc-state');\n } catch (error) {}\n document.querySelectorAll('.choice-btn,.evidence,.case-option').forEach(el => {\n el.disabled = false;\n el.classList.remove('selected','correct','wrong');\n });\n document.querySelectorAll('.history-case').forEach(el => el.classList.remove('solved'));\n document.querySelectorAll('.case-status').forEach(el => {\n el.className = 'case-status';\n el.textContent = 'Select one answer.';\n });\n document.querySelectorAll('.feedback').forEach(f => f.classList.remove('show'));\n document.getElementById('finishCases').disabled = true;\n renderState(); showScreen('home');\n }\n\n document.getElementById('resetBtn').addEventListener('click', () => {\n if (confirm('Reset all scores and progress?')) resetGame();\n });\n document.getElementById('playAgain').addEventListener('click', resetGame);\n soundBtn.addEventListener('click', () => { state.sound = !state.sound; saveState(); if(state.sound) tone(500,.08); });\n\n const modal = document.getElementById('howModal');\n document.getElementById('howBtn').addEventListener('click', () => modal.classList.add('show'));\n document.getElementById('closeHow').addEventListener('click', () => modal.classList.remove('show'));\n modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('show'); });\n document.addEventListener('keydown', e => { if (e.key === 'Escape') modal.classList.remove('show'); });\n\n renderState();\n updateFullscreenButton();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Investigative Journalist Challenge Investigative Journalist Challenge \u26f6 Full screen How to play Sound: on Reset game THE TRUTH ISWORTH PURSUING. \u2713 Investigate\u2713 Question\u2713 Verify\u2713 Report CONFIDENTIAL...<\/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-1306","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1306","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=1306"}],"version-history":[{"count":2,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1306\/revisions"}],"predecessor-version":[{"id":1339,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1306\/revisions\/1339"}],"wp:attachment":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/media?parent=1306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1306,"date":"2026-07-29T07:07:59","date_gmt":"2026-07-29T05:07:59","guid":{"rendered":"https:\/\/pcwallis.malo.wf\/?page_id=1306"},"modified":"2026-08-06T21:47:50","modified_gmt":"2026-08-06T19:47:50","slug":"investigative-journalist-challenge","status":"publish","type":"page","link":"https:\/\/pcwallis.malo.wf\/index.php\/investigative-journalist-challenge\/","title":{"rendered":"Investigative journalist challenge"},"content":{"rendered":"\n\n\n\n\n \n \n Investigative Journalist Challenge<\/title>\n <style>\n :root {\n --bg: #070b0f;\n --panel: #101820;\n --ink: #f4ead8;\n --paper: #e9dcc3;\n --paper-dark: #c8b48f;\n --gold: #d69b2d;\n --green: #56783d;\n --blue: #245d90;\n --purple: #6b4a86;\n --teal: #17818b;\n --orange: #bb641b;\n --danger: #bd2d2d;\n --success: #4c8b43;\n --shadow: 0 20px 60px rgba(0, 0, 0, .45);\n --radius: 22px;\n --font-display: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n --font-body: Georgia, \"Times New Roman\", serif;\n --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n }\n\n * { box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body {\n margin: 0;\n color: var(--ink);\n background:\n radial-gradient(circle at 25% 15%, rgba(27, 53, 72, .24), transparent 34%),\n radial-gradient(circle at 85% 80%, rgba(146, 74, 18, .14), transparent 30%),\n #05080b;\n font-family: var(--font-ui);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n body::before {\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n opacity: .14;\n background-image:\n linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);\n background-size: 4px 4px;\n mix-blend-mode: overlay;\n z-index: 100;\n }\n\n button, input { font: inherit; }\n button { cursor: pointer; }\n\n .app {\n width: min(1600px, 100%);\n margin: 0 auto;\n padding: 18px;\n }\n\n .topbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 14px;\n margin-bottom: 14px;\n }\n\n .brand-mini {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 900;\n letter-spacing: .07em;\n text-transform: uppercase;\n font-size: .86rem;\n color: #e6d4b3;\n }\n\n .brand-mini .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--gold);\n box-shadow: 0 0 18px rgba(214,155,45,.65);\n }\n\n .top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }\n\n .ghost-btn,\n .solid-btn {\n border: 1px solid rgba(255,255,255,.16);\n color: var(--ink);\n background: rgba(255,255,255,.055);\n padding: 10px 14px;\n border-radius: 999px;\n font-weight: 800;\n transition: .2s ease;\n }\n .ghost-btn:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }\n .solid-btn { background: var(--gold); color: #101010; border-color: transparent; }\n .solid-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }\n\n .screen {\n display: none;\n min-height: calc(100vh - 90px);\n border: 1px solid rgba(255,255,255,.12);\n border-radius: 28px;\n background: linear-gradient(155deg, rgba(17,27,35,.98), rgba(5,8,11,.98));\n box-shadow: var(--shadow);\n overflow: hidden;\n position: relative;\n }\n .screen.active { display: block; animation: fadeIn .28s ease; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }\n\n \/* HOME *\/\n .home-grid {\n display: grid;\n grid-template-columns: 1.18fr .82fr;\n min-height: calc(100vh - 92px);\n }\n\n .hero {\n position: relative;\n min-height: 760px;\n overflow: hidden;\n background:\n linear-gradient(90deg, rgba(6,9,13,.12), rgba(6,9,13,.6)),\n radial-gradient(circle at 20% 15%, rgba(240,176,67,.22), transparent 32%),\n linear-gradient(#10202d, #070b0f 68%);\n border-right: 1px solid rgba(255,255,255,.1);\n }\n\n .hero svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n .hero-copy {\n position: relative;\n z-index: 3;\n padding: clamp(28px, 5vw, 68px);\n max-width: 900px;\n }\n\n .kicker {\n color: var(--gold);\n text-transform: uppercase;\n letter-spacing: .3em;\n font-weight: 900;\n font-size: .8rem;\n margin-bottom: 12px;\n }\n\n h1, h2, h3, p { margin-top: 0; }\n\n .hero h1 {\n font-family: var(--font-display);\n text-transform: uppercase;\n line-height: .89;\n letter-spacing: .015em;\n font-size: clamp(3.2rem, 7.5vw, 8.6rem);\n margin: 0;\n text-shadow: 0 4px 0 rgba(0,0,0,.35);\n }\n .hero h1 span { display: block; color: var(--gold); font-size: .7em; }\n .hero-sub {\n margin-top: 18px;\n font-family: var(--font-body);\n font-size: clamp(1rem, 2vw, 1.35rem);\n font-weight: 700;\n max-width: 660px;\n letter-spacing: .05em;\n }\n\n .hero-bottom {\n position: absolute;\n z-index: 4;\n left: clamp(22px, 4vw, 62px);\n right: clamp(22px, 4vw, 62px);\n bottom: 24px;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 14px;\n align-items: end;\n }\n\n .rules-card {\n background: rgba(5,10,14,.86);\n border: 1px solid rgba(214,155,45,.5);\n border-radius: 18px;\n padding: 15px 18px;\n backdrop-filter: blur(8px);\n }\n .rules-card strong { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }\n .rules-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: .9rem; }\n .pill-score { display: inline-flex; align-items: center; gap: 7px; }\n .pill-score b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--success); }\n .pill-score.bad b { background: var(--danger); }\n\n .start-big {\n padding: 17px 24px;\n min-width: 220px;\n border: 0;\n border-radius: 16px;\n background: linear-gradient(180deg, #679348, #3f652e);\n color: white;\n font-family: var(--font-display);\n font-size: 1.35rem;\n letter-spacing: .06em;\n text-transform: uppercase;\n box-shadow: 0 10px 30px rgba(38,82,37,.35);\n }\n .start-big:hover { transform: translateY(-2px); filter: brightness(1.08); }\n\n .menu-pane {\n padding: clamp(20px, 3vw, 46px);\n display: flex;\n flex-direction: column;\n gap: 14px;\n justify-content: center;\n background:\n radial-gradient(circle at 100% 0, rgba(255,255,255,.05), transparent 28%),\n linear-gradient(180deg, #0b1117, #080b0e);\n }\n\n .menu-heading {\n font-family: var(--font-display);\n text-transform: uppercase;\n letter-spacing: .05em;\n font-size: clamp(1.6rem, 3vw, 2.9rem);\n margin-bottom: 6px;\n }\n\n .mission-card {\n --accent: var(--green);\n width: 100%;\n display: grid;\n grid-template-columns: 92px 1fr 54px;\n align-items: center;\n gap: 16px;\n background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 31%, #0e151d), #efe4cf 26%, #e9dcc3);\n color: #111820;\n border: 2px solid color-mix(in srgb, var(--accent) 78%, white 8%);\n border-radius: 18px;\n padding: 13px 14px;\n text-align: left;\n min-height: 112px;\n transition: .18s ease;\n position: relative;\n overflow: hidden;\n }\n .mission-card::after {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n opacity: .08;\n background: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 4px);\n }\n .mission-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 28px rgba(0,0,0,.28); }\n .mission-card.done { box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 0 0 2px rgba(80,160,80,.25); }\n .mission-card.locked { filter: grayscale(.7) brightness(.7); opacity: .7; }\n .mission-card.locked:hover { transform: none; }\n\n .mission-icon {\n width: 78px;\n height: 78px;\n border-radius: 18px;\n display: grid;\n place-items: center;\n color: white;\n border: 1px solid rgba(255,255,255,.32);\n background: rgba(0,0,0,.26);\n }\n .mission-icon svg { width: 54px; height: 54px; }\n\n .mission-card small {\n display: block;\n color: color-mix(in srgb, var(--accent) 82%, #141414);\n text-transform: uppercase;\n letter-spacing: .11em;\n font-weight: 1000;\n margin-bottom: 2px;\n }\n .mission-card h3 {\n font-family: var(--font-display);\n font-size: clamp(1.2rem, 2vw, 2rem);\n margin: 0;\n text-transform: uppercase;\n letter-spacing: .03em;\n line-height: 1;\n }\n .mission-card p { margin: 7px 0 0; font-size: .9rem; font-weight: 650; }\n .chev {\n width: 46px; height: 46px; border-radius: 50%;\n display: grid; place-items: center;\n background: var(--accent); color: #fff;\n font-size: 1.6rem; font-weight: 900;\n }\n .done-badge {\n position: absolute;\n top: 7px;\n right: 8px;\n background: #2f7f3e;\n color: #fff;\n padding: 4px 8px;\n border-radius: 999px;\n font-size: .68rem;\n font-weight: 900;\n letter-spacing: .04em;\n display: none;\n }\n .mission-card.done .done-badge { display: block; }\n\n \/* MISSION LAYOUT *\/\n .mission-screen {\n --accent: var(--green);\n min-height: calc(100vh - 90px);\n padding: clamp(18px, 3vw, 38px);\n background:\n radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 30%),\n linear-gradient(150deg, #0b1117, #06090c 70%);\n }\n\n .mission-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n border-bottom: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);\n padding-bottom: 14px;\n margin-bottom: 18px;\n }\n .mission-title-wrap { display: flex; gap: 14px; align-items: center; }\n .mission-number {\n width: 62px; height: 62px; border-radius: 18px;\n display: grid; place-items: center;\n background: var(--accent); color: white;\n font-family: var(--font-display); font-size: 2rem;\n box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent);\n flex: 0 0 auto;\n }\n .mission-header h2 {\n font-family: var(--font-display);\n text-transform: uppercase;\n line-height: .96;\n font-size: clamp(2rem, 5vw, 4.5rem);\n margin: 0;\n letter-spacing: .03em;\n }\n .mission-header h2 span { color: var(--accent); }\n .mission-header p { margin: 7px 0 0; color: #d8ceb9; font-family: var(--font-body); font-size: clamp(.95rem, 1.6vw, 1.2rem); }\n\n .progress-chip {\n min-width: 140px;\n border-radius: 16px;\n padding: 10px 13px;\n border: 1px solid rgba(255,255,255,.12);\n background: rgba(255,255,255,.05);\n text-align: right;\n font-weight: 900;\n }\n .progress-chip b { color: var(--gold); font-size: 1.4rem; }\n\n .paper {\n color: #171513;\n background:\n linear-gradient(135deg, rgba(130,95,45,.08), transparent 28%),\n radial-gradient(circle at 20% 15%, rgba(255,255,255,.48), transparent 25%),\n var(--paper);\n border: 1px solid rgba(73,50,24,.28);\n box-shadow: 0 12px 28px rgba(0,0,0,.32);\n border-radius: 12px;\n position: relative;\n }\n .paper::after {\n content: \"\";\n position: absolute; inset: 0; pointer-events: none;\n opacity: .13;\n background-image: repeating-linear-gradient(0deg, #2d241a 0 1px, transparent 1px 4px);\n border-radius: inherit;\n }\n\n .choice-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 14px;\n margin-top: 18px;\n }\n .choice-btn {\n --local: var(--accent);\n min-height: 118px;\n border-radius: 16px;\n border: 2px solid color-mix(in srgb, var(--local) 74%, #111);\n background: var(--paper);\n color: #17120e;\n padding: 18px;\n text-align: left;\n display: grid;\n grid-template-columns: 54px 1fr;\n gap: 14px;\n align-items: center;\n font-family: var(--font-body);\n font-weight: 800;\n font-size: clamp(1rem, 2vw, 1.35rem);\n transition: .18s ease;\n position: relative;\n overflow: hidden;\n }\n .choice-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 24px rgba(0,0,0,.26); }\n .choice-btn.selected { outline: 4px solid color-mix(in srgb, var(--local) 70%, white 10%); }\n .choice-btn.correct { background: #dcebd4; border-color: var(--success); }\n .choice-btn.wrong { background: #f0d2c9; border-color: var(--danger); }\n .choice-letter {\n width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;\n font-family: var(--font-display); font-size: 1.8rem; color: white;\n background: var(--local);\n }\n\n .feedback {\n margin-top: 14px;\n border-radius: 14px;\n border: 1px solid rgba(255,255,255,.13);\n background: rgba(255,255,255,.055);\n padding: 14px 16px;\n display: none;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n }\n .feedback.show { display: flex; animation: fadeIn .2s ease; }\n .feedback strong { color: var(--gold); }\n .feedback .next-btn {\n border: 0;\n border-radius: 999px;\n padding: 11px 16px;\n background: var(--accent);\n color: white;\n font-weight: 900;\n white-space: nowrap;\n }\n\n .mission-nav {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n margin-top: 18px;\n flex-wrap: wrap;\n }\n\n \/* Mission 1 *\/\n .m1-layout {\n display: grid;\n grid-template-columns: .9fr 1.1fr;\n gap: 18px;\n min-height: 470px;\n }\n .source-note { padding: clamp(22px, 4vw, 52px); font-family: var(--font-body); font-size: clamp(1.15rem, 2.2vw, 2rem); line-height: 1.55; transform: rotate(-.5deg); }\n .source-note::before { content: \"\ud83d\udcce\"; position: absolute; top: -16px; left: 22px; font-size: 2.8rem; filter: grayscale(1); }\n .alley-scene { min-height: 470px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #0d151c; }\n .alley-scene svg { width: 100%; height: 100%; display: block; }\n\n \/* Mission 2 *\/\n .evidence-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0,1fr));\n gap: 15px;\n }\n .evidence {\n background: #d8c9ad;\n color: #15120f;\n padding: 18px;\n border-radius: 14px;\n border: 1px solid rgba(0,0,0,.25);\n position: relative;\n box-shadow: 0 15px 30px rgba(0,0,0,.32);\n min-height: 490px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n transition: .2s ease;\n }\n .evidence:hover { transform: translateY(-3px); }\n .evidence.selected { outline: 5px solid var(--blue); }\n .doc-tab {\n position: absolute; top: -12px; left: 50%; transform: translateX(-50%);\n background: var(--blue); color: white; padding: 9px 22px;\n border-radius: 6px; font-family: var(--font-display); letter-spacing: .06em;\n box-shadow: 0 8px 15px rgba(0,0,0,.28); white-space: nowrap;\n }\n .evidence-visual {\n margin-top: 24px;\n background: #1b2730;\n border: 9px solid #eee6d6;\n min-height: 260px;\n overflow: hidden;\n border-radius: 3px;\n }\n .evidence-visual svg { width: 100%; height: 100%; display: block; }\n .caption-slip { background: #e6d5b6; border: 1px solid #b59b70; padding: 10px; font-family: \"Courier New\", monospace; font-size: .9rem; }\n .evidence-summary { font-family: var(--font-body); font-size: 1rem; line-height: 1.35; margin: auto 0 0; }\n .contract-doc {\n min-height: 280px;\n padding: 20px;\n background: #efe5d2;\n font-family: Georgia, serif;\n font-size: .7rem;\n line-height: 1.2;\n position: relative;\n }\n .contract-doc h4 { text-align: center; margin: 0 0 8px; font-size: 1.15rem; }\n .stamp { position: absolute; right: 12px; bottom: 16px; color: #a42121; border: 3px solid #a42121; padding: 4px 7px; transform: rotate(-7deg); font-weight: 1000; font-size: 1rem; }\n\n \/* Mission 3 *\/\n .desk-scene { min-height: 460px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }\n .desk-scene svg { width: 100%; height: 100%; display: block; }\n\n \/* Mission 4 *\/\n .m4-layout {\n display: grid;\n grid-template-columns: .78fr 1.22fr;\n gap: 18px;\n min-height: 500px;\n }\n .decision-copy { padding: clamp(22px,4vw,52px); font-family: var(--font-body); font-size: clamp(1.05rem,2vw,1.7rem); line-height: 1.55; }\n .decision-copy strong { color: var(--teal); display:block; font-size: 1.2em; margin-bottom: 14px; }\n .crowd-scene { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background:#0a1015; }\n .crowd-scene svg { width: 100%; height: 100%; display:block; }\n\n \/* Final historical multiple-choice mission *\/\n .historical-quiz {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 18px;\n align-items: stretch;\n }\n .history-case {\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-height: 470px;\n padding: 22px;\n border: 2px solid #744018;\n border-radius: 20px;\n color: #17120e;\n background:\n linear-gradient(135deg, rgba(130,95,45,.08), transparent 28%),\n radial-gradient(circle at 20% 15%, rgba(255,255,255,.5), transparent 25%),\n var(--paper);\n box-shadow: 0 16px 34px rgba(0,0,0,.34);\n }\n .history-case::before {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n opacity: .11;\n background-image: repeating-linear-gradient(0deg, #2d241a 0 1px, transparent 1px 4px);\n }\n .history-case.solved {\n border-color: var(--success);\n box-shadow: 0 0 0 4px rgba(76,139,67,.22), 0 16px 34px rgba(0,0,0,.34);\n }\n .case-label {\n position: relative;\n z-index: 1;\n align-self: flex-start;\n margin-bottom: 13px;\n padding: 6px 10px;\n border-radius: 999px;\n color: white;\n background: var(--orange);\n font-size: .75rem;\n font-weight: 1000;\n letter-spacing: .1em;\n text-transform: uppercase;\n }\n .history-case h3 {\n position: relative;\n z-index: 1;\n margin: 0 0 18px;\n font-family: var(--font-body);\n font-size: clamp(1.08rem, 1.65vw, 1.38rem);\n line-height: 1.42;\n }\n .case-options {\n position: relative;\n z-index: 1;\n display: grid;\n gap: 10px;\n margin-top: auto;\n }\n .case-option {\n width: 100%;\n min-height: 66px;\n display: grid;\n grid-template-columns: 42px 1fr;\n align-items: center;\n gap: 11px;\n padding: 11px 13px;\n border: 2px solid #8e7148;\n border-radius: 12px;\n color: #17120e;\n background: #f7ecd6;\n text-align: left;\n font-family: var(--font-body);\n font-weight: 800;\n line-height: 1.25;\n transition: .18s ease;\n }\n .case-option:hover,\n .case-option:focus-visible {\n transform: translateY(-2px);\n border-color: var(--orange);\n outline: 3px solid rgba(187,100,27,.25);\n }\n .case-option .option-letter {\n width: 38px;\n height: 38px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n color: white;\n background: var(--orange);\n font-family: var(--font-display);\n font-size: 1.25rem;\n border: 2px solid rgba(255,255,255,.85);\n }\n .case-option.correct {\n border-color: var(--success);\n background: #dcebd4;\n }\n .case-option.wrong {\n border-color: var(--danger);\n background: #f0d2c9;\n animation: qcmShake .22s linear 2;\n }\n .case-option:disabled {\n cursor: default;\n opacity: .86;\n }\n .case-option.correct:disabled { opacity: 1; }\n .case-status {\n position: relative;\n z-index: 1;\n min-height: 46px;\n margin-top: 13px;\n padding: 10px 12px;\n border-radius: 10px;\n color: #4a3520;\n background: rgba(255,255,255,.45);\n font-family: var(--font-body);\n font-size: .92rem;\n line-height: 1.35;\n }\n .case-status.ok { color: #214d27; background: #dcebd4; }\n .case-status.error { color: #7f201d; background: #f0d2c9; }\n @keyframes qcmShake {\n 0%,100% { transform: translateX(0); }\n 35% { transform: translateX(-4px); }\n 70% { transform: translateX(4px); }\n }\n @media (max-width: 1060px) {\n .historical-quiz { grid-template-columns: 1fr; }\n .history-case { min-height: auto; }\n }\n \/* Result *\/\n .result-wrap {\n min-height: calc(100vh - 90px);\n display:grid;\n place-items:center;\n padding: 28px;\n background:\n radial-gradient(circle at 50% 20%, rgba(214,155,45,.22), transparent 32%),\n linear-gradient(160deg,#111923,#06090c 70%);\n }\n .result-card {\n width:min(900px,100%);\n text-align:center;\n padding: clamp(28px,6vw,70px);\n border-radius:28px;\n border:1px solid rgba(255,255,255,.14);\n background:rgba(255,255,255,.055);\n box-shadow:var(--shadow);\n }\n .medal {\n width: 170px; height:170px; margin:0 auto 18px; border-radius:50%;\n display:grid; place-items:center; font-size:5.2rem;\n background: radial-gradient(circle at 35% 30%, #fff1aa, #d29a24 45%, #8d5511 72%);\n color:#4b2d0a; border:9px solid rgba(255,255,255,.18);\n box-shadow:0 0 70px rgba(214,155,45,.4);\n }\n .result-card h2 { font-family:var(--font-display); font-size:clamp(3rem,7vw,6rem); margin:0; text-transform:uppercase; }\n .result-card .score { color:var(--gold); font-size:clamp(2rem,4vw,3.2rem); font-weight:1000; margin:8px 0 20px; }\n .result-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:24px; }\n\n .modal {\n position:fixed; inset:0; z-index:200;\n display:none; align-items:center; justify-content:center;\n background:rgba(0,0,0,.72); padding:20px;\n }\n .modal.show { display:flex; }\n .modal-card { width:min(700px,100%); background:#101820; border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:26px; box-shadow:var(--shadow); }\n .modal-card h3 { font-family:var(--font-display); font-size:2.4rem; margin:0 0 12px; text-transform:uppercase; }\n .modal-card p, .modal-card li { line-height:1.55; color:#ddd0bb; }\n\n .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }\n\n @media (max-width: 840px) {\n .home-grid { grid-template-columns: 1fr; }\n .hero { min-height: 690px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }\n .menu-pane { padding-top: 30px; }\n .mission-card { grid-template-columns: 78px 1fr 46px; }\n .m1-layout, .m4-layout { grid-template-columns:1fr; }\n .evidence-grid { grid-template-columns:1fr; }\n .evidence { min-height: auto; }\n .evidence-visual { min-height: 330px; }\n }\n @media (max-width: 760px) {\n .app { padding: 8px; }\n .topbar { align-items:flex-start; }\n .brand-mini { font-size:.68rem; }\n .screen { border-radius:18px; }\n .hero { min-height: 760px; }\n .hero-copy { padding: 28px 22px; }\n .hero-bottom { grid-template-columns:1fr; left:16px; right:16px; }\n .start-big { width:100%; }\n .choice-grid { grid-template-columns:1fr; }\n .mission-header { align-items:flex-start; }\n .progress-chip { display:none; }\n .mission-title-wrap { align-items:flex-start; }\n .mission-number { width:50px; height:50px; font-size:1.5rem; border-radius:14px; }\n .feedback { align-items:flex-start; flex-direction:column; }\n .match-columns { gap:16px; }\n .match-card { min-height:135px; padding:14px; font-size:.93rem; }\n .menu-pane { padding:16px; }\n .mission-card { grid-template-columns:58px 1fr 38px; min-height:100px; gap:10px; }\n .mission-icon { width:52px; height:52px; border-radius:12px; }\n .mission-icon svg { width:38px; height:38px; }\n .chev { width:36px; height:36px; }\n }\n\n\n \/* ================================================================\n EMBED-SAFE \/ FULL-SCREEN OVERRIDES\n These selectors are intentionally specific so page-builder themes\n cannot wash out the game colours or restyle its buttons.\n ================================================================ *\/\n #ijc-app {\n position: relative !important;\n isolation: isolate !important;\n width: min(1600px, 100%) !important;\n max-width: 1600px !important;\n margin: 0 auto !important;\n padding: 14px !important;\n color: #fff8e8 !important;\n background: #05080b !important;\n border-radius: 24px !important;\n color-scheme: dark;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif !important;\n }\n\n #ijc-app, #ijc-app * { box-sizing: border-box !important; }\n #ijc-app button {\n opacity: 1 !important;\n visibility: visible !important;\n -webkit-text-fill-color: currentColor;\n appearance: none;\n }\n\n #ijc-app .topbar {\n position: relative;\n z-index: 50;\n min-height: 64px;\n padding: 10px 12px !important;\n margin: 0 0 12px !important;\n border: 1px solid #3b5268 !important;\n border-radius: 17px !important;\n background: linear-gradient(180deg, #142333, #08111a) !important;\n box-shadow: 0 10px 28px rgba(0,0,0,.38) !important;\n }\n\n #ijc-app .brand-mini {\n color: #fff8e8 !important;\n opacity: 1 !important;\n text-shadow: 0 1px 2px #000;\n }\n\n #ijc-app .brand-mini .dot {\n width: 15px !important;\n height: 15px !important;\n background: #ffb72f !important;\n border: 2px solid #fff1c2 !important;\n box-shadow: 0 0 0 4px rgba(255,183,47,.2), 0 0 20px rgba(255,183,47,.8) !important;\n }\n\n #ijc-app .top-actions {\n align-items: center;\n gap: 9px !important;\n }\n\n #ijc-app .ghost-btn,\n #ijc-app .solid-btn,\n #ijc-app .fullscreen-btn {\n min-height: 44px;\n padding: 10px 15px !important;\n border-radius: 999px !important;\n font-weight: 900 !important;\n letter-spacing: .01em;\n line-height: 1 !important;\n text-shadow: none !important;\n box-shadow: 0 5px 15px rgba(0,0,0,.28) !important;\n }\n\n #ijc-app .ghost-btn {\n color: #ffffff !important;\n background: #1b3044 !important;\n border: 2px solid #7592ad !important;\n }\n #ijc-app .ghost-btn:hover,\n #ijc-app .ghost-btn:focus-visible {\n color: #ffffff !important;\n background: #284965 !important;\n border-color: #b9d7ef !important;\n outline: 3px solid rgba(124,190,255,.35) !important;\n }\n\n #ijc-app .solid-btn {\n color: #171006 !important;\n background: #ffb833 !important;\n border: 2px solid #ffe2a0 !important;\n }\n\n #ijc-app .fullscreen-btn {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 8px !important;\n color: #ffffff !important;\n background: linear-gradient(180deg, #2485eb, #1358ad) !important;\n border: 2px solid #9ed0ff !important;\n box-shadow: 0 6px 18px rgba(20,102,196,.5) !important;\n }\n #ijc-app .fullscreen-btn:hover,\n #ijc-app .fullscreen-btn:focus-visible {\n background: linear-gradient(180deg, #3c9aff, #1768c9) !important;\n outline: 3px solid rgba(95,174,255,.4) !important;\n transform: translateY(-1px);\n }\n #ijc-app .fullscreen-btn span { font-size: 1.35em; line-height: .7; }\n\n #ijc-app .screen {\n background: linear-gradient(155deg, rgba(17,27,35,.995), rgba(5,8,11,.995)) !important;\n color: #fff8e8 !important;\n border-color: #34495c !important;\n }\n\n #ijc-app .hero h1 {\n color: #fff8e8 !important;\n font-size: clamp(2.7rem, 5.6vw, 7.4rem) !important;\n }\n #ijc-app .hero h1 span,\n #ijc-app .kicker,\n #ijc-app .rules-card strong,\n #ijc-app .score,\n #ijc-app [data-score] { color: #ffb72f !important; }\n\n #ijc-app .menu-heading,\n #ijc-app .hero-sub,\n #ijc-app .rules-card,\n #ijc-app .feedback,\n #ijc-app .mission-header p { color: #fff4df !important; }\n\n #ijc-app .mission-card {\n opacity: 1 !important;\n box-shadow: 0 8px 20px rgba(0,0,0,.28) !important;\n }\n #ijc-app .mission-card h3,\n #ijc-app .mission-card p { color: #111820 !important; opacity: 1 !important; }\n #ijc-app .mission-card small {\n color: #08111a !important;\n background: rgba(255,255,255,.66);\n display: inline-block;\n padding: 3px 7px;\n border-radius: 5px;\n }\n\n #ijc-app .chev,\n #ijc-app .choice-letter,\n #ijc-app .mission-number,\n #ijc-app .pill-score b {\n color: #ffffff !important;\n border: 3px solid rgba(255,255,255,.92) !important;\n box-shadow: 0 0 0 3px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.35) !important;\n opacity: 1 !important;\n }\n\n #ijc-app .choice-btn {\n color: #18120d !important;\n background: #f2e5ca !important;\n opacity: 1 !important;\n }\n #ijc-app .choice-btn:hover,\n #ijc-app .choice-btn:focus-visible {\n filter: brightness(1.05);\n outline: 4px solid rgba(255,255,255,.55) !important;\n }\n #ijc-app .choice-btn:disabled,\n #ijc-app .match-card:disabled,\n #ijc-app .solid-btn:disabled {\n opacity: .72 !important;\n cursor: not-allowed !important;\n }\n\n \/* Immersive fallback works even when an iframe does not allow the\n browser Fullscreen API. *\/\n #ijc-app.immersive,\n #ijc-app:fullscreen,\n #ijc-app:-webkit-full-screen {\n position: fixed !important;\n inset: 0 !important;\n z-index: 2147483646 !important;\n width: 100vw !important;\n max-width: none !important;\n height: 100vh !important;\n height: 100dvh !important;\n margin: 0 !important;\n padding: 10px !important;\n border-radius: 0 !important;\n overflow-x: hidden !important;\n overflow-y: auto !important;\n overscroll-behavior: contain;\n background: #05080b !important;\n }\n\n body.ijc-lock { overflow: hidden !important; }\n\n #ijc-app.immersive .topbar,\n #ijc-app:fullscreen .topbar,\n #ijc-app:-webkit-full-screen .topbar {\n position: sticky !important;\n top: 0 !important;\n z-index: 1000 !important;\n }\n\n #ijc-app.immersive .screen,\n #ijc-app:fullscreen .screen,\n #ijc-app:-webkit-full-screen .screen {\n min-height: calc(100dvh - 88px) !important;\n border-radius: 20px !important;\n }\n\n #ijc-app.immersive .home-grid,\n #ijc-app:fullscreen .home-grid,\n #ijc-app:-webkit-full-screen .home-grid {\n min-height: calc(100dvh - 88px) !important;\n }\n\n @media (min-width: 841px) {\n #ijc-app .home-grid { grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr) !important; }\n #ijc-app .hero { min-height: clamp(620px, calc(100dvh - 92px), 850px) !important; }\n #ijc-app .menu-pane { gap: 10px !important; padding: 22px !important; }\n #ijc-app .mission-card { min-height: 98px !important; padding: 10px 12px !important; }\n #ijc-app .mission-icon { width: 68px !important; height: 68px !important; }\n #ijc-app .mission-icon svg { width: 46px !important; height: 46px !important; }\n }\n\n @media (max-width: 840px) {\n #ijc-app { padding: 7px !important; border-radius: 14px !important; }\n #ijc-app .topbar { align-items: stretch !important; flex-direction: column !important; }\n #ijc-app .top-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; }\n #ijc-app .fullscreen-btn { grid-column: 1 \/ -1; }\n #ijc-app .ghost-btn, #ijc-app .fullscreen-btn { width: 100% !important; }\n #ijc-app .hero { min-height: 680px !important; }\n }\n\n @media (max-width: 520px) {\n #ijc-app .top-actions { grid-template-columns: 1fr !important; }\n #ijc-app .fullscreen-btn { grid-column: auto; }\n #ijc-app .brand-mini { font-size: .76rem !important; }\n #ijc-app .mission-card { grid-template-columns: 54px 1fr 36px !important; }\n }\n\n <\/style>\n<\/head>\n<body>\n\n\n\n <div class=\"app\" id=\"ijc-app\">\n <header class=\"topbar\">\n <div class=\"brand-mini\"><span class=\"dot\"><\/span> Investigative Journalist Challenge<\/div>\n <div class=\"top-actions\">\n <button class=\"fullscreen-btn\" id=\"fullscreenBtn\" type=\"button\" aria-pressed=\"false\" title=\"Open the game in full screen\"><span aria-hidden=\"true\">\u26f6<\/span> Full screen<\/button>\n <button class=\"ghost-btn\" id=\"howBtn\">How to play<\/button>\n <button class=\"ghost-btn\" id=\"soundBtn\" aria-pressed=\"true\">Sound: on<\/button>\n <button class=\"ghost-btn\" id=\"resetBtn\">Reset game<\/button>\n <\/div>\n <\/header>\n\n \n <main id=\"home\" class=\"screen active\" aria-label=\"Main menu\">\n <div class=\"home-grid\">\n <section class=\"hero\">\n <svg viewBox=\"0 0 1000 900\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"city\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stop-color=\"#14283a\"><\/stop>\n <stop offset=\"1\" stop-color=\"#071018\"><\/stop>\n <\/linearGradient>\n <linearGradient id=\"wood\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n <stop offset=\"0\" stop-color=\"#2a170d\"><\/stop><stop offset=\".55\" stop-color=\"#5b341b\"><\/stop><stop offset=\"1\" stop-color=\"#21120b\"><\/stop>\n <\/linearGradient>\n <radialGradient id=\"lampGlow\">\n <stop offset=\"0\" stop-color=\"#ffd98a\" stop-opacity=\".7\"><\/stop>\n <stop offset=\"1\" stop-color=\"#ffd98a\" stop-opacity=\"0\"><\/stop>\n <\/radialGradient>\n <\/defs>\n <rect width=\"1000\" height=\"900\" fill=\"#071018\"><\/rect>\n <rect x=\"620\" y=\"0\" width=\"380\" height=\"560\" fill=\"url(#city)\"><\/rect>\n <g fill=\"#09131d\">\n <rect x=\"650\" y=\"170\" width=\"80\" height=\"390\"><\/rect><rect x=\"730\" y=\"100\" width=\"90\" height=\"460\"><\/rect><rect x=\"825\" y=\"220\" width=\"55\" height=\"340\"><\/rect><rect x=\"885\" y=\"130\" width=\"100\" height=\"430\"><\/rect>\n <\/g>\n <g fill=\"#d6ad60\" opacity=\".8\">\n <rect x=\"670\" y=\"205\" width=\"8\" height=\"12\"><\/rect><rect x=\"690\" y=\"235\" width=\"8\" height=\"12\"><\/rect><rect x=\"750\" y=\"145\" width=\"8\" height=\"12\"><\/rect><rect x=\"785\" y=\"180\" width=\"8\" height=\"12\"><\/rect><rect x=\"845\" y=\"260\" width=\"8\" height=\"12\"><\/rect><rect x=\"915\" y=\"170\" width=\"8\" height=\"12\"><\/rect><rect x=\"945\" y=\"220\" width=\"8\" height=\"12\"><\/rect>\n <\/g>\n <rect x=\"0\" y=\"520\" width=\"1000\" height=\"380\" fill=\"url(#wood)\"><\/rect>\n <g opacity=\".95\">\n <rect x=\"120\" y=\"230\" width=\"500\" height=\"290\" rx=\"8\" fill=\"#6c4d2f\" stroke=\"#a1764b\" stroke-width=\"10\"><\/rect>\n <path d=\"M155 260 H585 V490 H155 Z\" fill=\"#b68a54\" opacity=\".24\"><\/path>\n <g stroke=\"#9e2c21\" stroke-width=\"4\" fill=\"none\">\n <path d=\"M200 300 L360 360 L530 290 L480 450 L280 420 Z\"><\/path>\n <path d=\"M190 450 L360 360 L500 390\"><\/path>\n <\/g>\n <g fill=\"#9f2f20\"><circle cx=\"200\" cy=\"300\" r=\"8\"><\/circle><circle cx=\"360\" cy=\"360\" r=\"8\"><\/circle><circle cx=\"530\" cy=\"290\" r=\"8\"><\/circle><circle cx=\"480\" cy=\"450\" r=\"8\"><\/circle><circle cx=\"280\" cy=\"420\" r=\"8\"><\/circle><circle cx=\"190\" cy=\"450\" r=\"8\"><\/circle><circle cx=\"500\" cy=\"390\" r=\"8\"><\/circle><\/g>\n <g fill=\"#d8c8a9\" stroke=\"#3e2d20\" stroke-width=\"3\">\n <rect x=\"170\" y=\"275\" width=\"110\" height=\"76\" transform=\"rotate(-5 170 275)\"><\/rect><rect x=\"330\" y=\"270\" width=\"120\" height=\"76\" transform=\"rotate(4 330 270)\"><\/rect><rect x=\"430\" y=\"385\" width=\"120\" height=\"78\" transform=\"rotate(-4 430 385)\"><\/rect><rect x=\"225\" y=\"400\" width=\"98\" height=\"66\" transform=\"rotate(3 225 400)\"><\/rect>\n <\/g>\n <g fill=\"#13212b\"><circle cx=\"225\" cy=\"308\" r=\"18\"><\/circle><rect x=\"205\" y=\"328\" width=\"42\" height=\"15\"><\/rect><rect x=\"360\" y=\"290\" width=\"60\" height=\"40\"><\/rect><path d=\"M455 450 h72 l-36 -42 z\"><\/path><\/g>\n <\/g>\n <ellipse cx=\"120\" cy=\"160\" rx=\"210\" ry=\"180\" fill=\"url(#lampGlow)\"><\/ellipse>\n <g stroke=\"#2a2a2a\" stroke-width=\"18\" fill=\"none\"><path d=\"M20 10 L100 115 L160 210\"><\/path><\/g>\n <path d=\"M70 120 Q130 75 205 120 L190 170 Q110 190 55 160 Z\" fill=\"#17191a\" stroke=\"#4f4f4f\" stroke-width=\"5\"><\/path>\n <circle cx=\"130\" cy=\"150\" r=\"46\" fill=\"#f4c66c\" opacity=\".3\"><\/circle>\n <g transform=\"translate(70 580)\">\n <rect x=\"0\" y=\"75\" width=\"360\" height=\"140\" rx=\"25\" fill=\"#111\"><\/rect>\n <rect x=\"50\" y=\"20\" width=\"260\" height=\"95\" rx=\"15\" fill=\"#1b1b1b\"><\/rect>\n <g fill=\"#d4b77d\"><circle cx=\"50\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"85\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"120\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"155\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"190\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"225\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"260\" cy=\"150\" r=\"13\"><\/circle><circle cx=\"295\" cy=\"150\" r=\"13\"><\/circle><\/g>\n <rect x=\"92\" y=\"0\" width=\"185\" height=\"70\" fill=\"#ded0b4\" transform=\"rotate(-2 92 0)\"><\/rect>\n <text x=\"115\" y=\"30\" font-family=\"Georgia\" font-size=\"17\" fill=\"#18120c\">THE TRUTH IS<\/text><text x=\"115\" y=\"53\" font-family=\"Georgia\" font-size=\"17\" fill=\"#18120c\">WORTH PURSUING.<\/text>\n <\/g>\n <g transform=\"translate(430 635)\">\n <rect x=\"0\" y=\"0\" width=\"210\" height=\"150\" rx=\"12\" fill=\"#d6c7a8\" stroke=\"#8e724e\" stroke-width=\"4\"><\/rect>\n <line x1=\"22\" y1=\"28\" x2=\"185\" y2=\"28\" stroke=\"#7e6b50\" stroke-width=\"2\"><\/line><line x1=\"22\" y1=\"55\" x2=\"185\" y2=\"55\" stroke=\"#7e6b50\" stroke-width=\"2\"><\/line><line x1=\"22\" y1=\"82\" x2=\"185\" y2=\"82\" stroke=\"#7e6b50\" stroke-width=\"2\"><\/line>\n <text x=\"28\" y=\"48\" font-family=\"Georgia\" font-size=\"18\" fill=\"#21170e\">\u2713 Investigate<\/text><text x=\"28\" y=\"75\" font-family=\"Georgia\" font-size=\"18\" fill=\"#21170e\">\u2713 Question<\/text><text x=\"28\" y=\"102\" font-family=\"Georgia\" font-size=\"18\" fill=\"#21170e\">\u2713 Verify<\/text><text x=\"28\" y=\"129\" font-family=\"Georgia\" font-size=\"18\" fill=\"#21170e\">\u2713 Report<\/text>\n <\/g>\n <g transform=\"translate(675 595)\">\n <rect width=\"235\" height=\"135\" rx=\"10\" fill=\"#9e7040\" transform=\"rotate(-4 0 0)\"><\/rect><rect x=\"25\" y=\"16\" width=\"225\" height=\"130\" rx=\"8\" fill=\"#b88950\" transform=\"rotate(2 25 16)\"><\/rect><text x=\"65\" y=\"85\" font-family=\"Impact\" font-size=\"30\" fill=\"#8f211d\" transform=\"rotate(-4 65 85)\">CONFIDENTIAL<\/text>\n <\/g>\n <g transform=\"translate(585 600)\">\n <ellipse cx=\"0\" cy=\"0\" rx=\"58\" ry=\"38\" fill=\"#151515\"><\/ellipse><rect x=\"-58\" y=\"0\" width=\"116\" height=\"90\" fill=\"#191919\"><\/rect><ellipse cx=\"0\" cy=\"90\" rx=\"58\" ry=\"22\" fill=\"#0b0b0b\"><\/ellipse><text x=\"-38\" y=\"40\" font-family=\"Arial\" font-size=\"16\" fill=\"#d0b789\">QUESTION<\/text><text x=\"-40\" y=\"62\" font-family=\"Arial\" font-size=\"16\" fill=\"#d0b789\">EVERYTHING<\/text>\n <\/g>\n <\/svg>\n <div class=\"hero-copy\">\n <div class=\"kicker\">Classroom investigation game<\/div>\n <h1>Investigative <span>Journalist Challenge<\/span><\/h1>\n <p class=\"hero-sub\">Expose the truth. Ask the right questions. Protect your sources. Verify every claim.<\/p>\n <\/div>\n <div class=\"hero-bottom\">\n <div class=\"rules-card\">\n <strong>Scoring rules<\/strong>\n <div class=\"rules-row\">\n <span class=\"pill-score\"><b>+3<\/b> Correct on the first try<\/span>\n <span class=\"pill-score bad\"><b>\u22121<\/b> Each wrong attempt<\/span>\n <\/div>\n <\/div>\n <button class=\"start-big\" data-go=\"mission1\">Start investigation<\/button>\n <\/div>\n <\/section>\n\n <aside class=\"menu-pane\">\n <div class=\"menu-heading\">Choose a mission<\/div>\n <button class=\"mission-card\" style=\"--accent:var(--green)\" data-go=\"mission1\" data-mission=\"1\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><path d=\"M13 51c4-9 11-14 19-14s15 5 19 14\"><\/path><circle cx=\"32\" cy=\"24\" r=\"11\"><\/circle><path d=\"M14 19h36M22 11h20l5 8H17z\"><\/path><\/svg>\n <\/span>\n <span><small>Mission 1<\/small><h3>Meet the whistleblower<\/h3><p>Make first contact. Earn their trust.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n\n <button class=\"mission-card\" style=\"--accent:var(--blue)\" data-go=\"mission2\" data-mission=\"2\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\"><svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><rect x=\"10\" y=\"10\" width=\"30\" height=\"40\" rx=\"3\"><\/rect><path d=\"M16 18h18M16 26h12M16 34h16\"><\/path><circle cx=\"43\" cy=\"40\" r=\"12\"><\/circle><path d=\"m52 49 7 7\"><\/path><\/svg><\/span>\n <span><small>Mission 2<\/small><h3>Analyze the evidence<\/h3><p>Examine documents. Find the strongest proof.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n\n <button class=\"mission-card\" style=\"--accent:var(--purple)\" data-go=\"mission3\" data-mission=\"3\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\"><svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><rect x=\"14\" y=\"28\" width=\"36\" height=\"28\" rx=\"5\"><\/rect><path d=\"M22 28V18a10 10 0 0 1 20 0v10\"><\/path><circle cx=\"32\" cy=\"41\" r=\"4\"><\/circle><path d=\"M32 45v6\"><\/path><\/svg><\/span>\n <span><small>Mission 3<\/small><h3>Protect your source<\/h3><p>Keep confidential information safe.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n\n <button class=\"mission-card\" style=\"--accent:var(--teal)\" data-go=\"mission4\" data-mission=\"4\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\"><svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><path d=\"M8 54h48M14 50V28M24 50V28M40 50V28M50 50V28M8 28h48L32 10z\"><\/path><\/svg><\/span>\n <span><small>Mission 4<\/small><h3>Public interest or national security?<\/h3><p>Balance the right to know with the risks.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n\n <button class=\"mission-card\" style=\"--accent:var(--orange)\" data-go=\"mission5\" data-mission=\"5\">\n <span class=\"done-badge\">COMPLETED<\/span>\n <span class=\"mission-icon\"><svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><path d=\"M8 18h18l5 7h25v28H8z\"><\/path><path d=\"M8 25h48\"><\/path><\/svg><\/span>\n <span><small>Final mission<\/small><h3>Historical cases<\/h3><p>Answer three multiple-choice questions about famous investigations.<\/p><\/span><span class=\"chev\">\u203a<\/span>\n <\/button>\n <\/aside>\n <\/div>\n <\/main>\n\n \n <section id=\"mission1\" class=\"screen mission-screen\" style=\"--accent:var(--green)\" aria-label=\"Mission 1\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\">\n <div class=\"mission-number\">1<\/div>\n <div><h2><span>Mission 1:<\/span> Meet the whistleblower<\/h2><p>You receive a message from a whistleblower. What do you do?<\/p><\/div>\n <\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n <div class=\"m1-layout\">\n <article class=\"paper source-note\">\n \u201cI have documents proving that the government wants to erase a culture from public institutions, schools and public events.<br><br>This is not right.<br><br><strong>Meet me. Trust no one.<\/strong>\u201d\n <\/article>\n <div class=\"alley-scene\">\n <svg viewBox=\"0 0 900 520\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Journalist meeting an anonymous source in a rainy alley\">\n <defs><linearGradient id=\"alleyBg\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop stop-color=\"#0d1c29\"><\/stop><stop offset=\"1\" stop-color=\"#05080b\"><\/stop><\/linearGradient><radialGradient id=\"streetGlow\"><stop stop-color=\"#ffd78e\" stop-opacity=\".8\"><\/stop><stop offset=\"1\" stop-color=\"#ffd78e\" stop-opacity=\"0\"><\/stop><\/radialGradient><\/defs>\n <rect width=\"900\" height=\"520\" fill=\"url(#alleyBg)\"><\/rect>\n <path d=\"M0 0h250l130 520H0zM900 0H650L520 520h380z\" fill=\"#151719\"><\/path>\n <g stroke=\"#313335\" stroke-width=\"4\" opacity=\".8\"><path d=\"M40 30 210 0M22 90l200-30M0 165l245-45M878 40 690 0M900 120 675 70M900 210 650 140\"><\/path><\/g>\n <ellipse cx=\"530\" cy=\"210\" rx=\"230\" ry=\"200\" fill=\"url(#streetGlow)\"><\/ellipse>\n <path d=\"M0 470 Q450 390 900 470V520H0z\" fill=\"#0a1116\"><\/path>\n <g opacity=\".45\" stroke=\"#9fc7db\" stroke-width=\"2\"><path d=\"M120 0l30 520M210 0l50 520M350 0l20 520M480 0l-15 520M610 0l-30 520M760 0l-50 520\"><\/path><\/g>\n <g transform=\"translate(360 135)\">\n <path d=\"M80 15q45 3 68 40l22 190H15l20-188Q47 20 80 15z\" fill=\"#0b0e11\"><\/path>\n <path d=\"M43 55q37-45 80 0l-10 42H55z\" fill=\"#111820\"><\/path>\n <circle cx=\"83\" cy=\"73\" r=\"22\" fill=\"#111\"><\/circle>\n <path d=\"M30 138q45 20 100 0\" stroke=\"#2f3940\" stroke-width=\"10\"><\/path>\n <path d=\"M108 160l85 42\" stroke=\"#111\" stroke-width=\"23\" stroke-linecap=\"round\"><\/path>\n <\/g>\n <g transform=\"translate(575 135)\">\n <circle cx=\"75\" cy=\"60\" r=\"35\" fill=\"#c08e69\"><\/circle>\n <path d=\"M45 38q35-36 70 2v34q-12-28-70-10z\" fill=\"#251a15\"><\/path>\n <path d=\"M26 108q50-25 98 0l22 160H0z\" fill=\"#18232a\"><\/path>\n <path d=\"M28 145l-85 57\" stroke=\"#18232a\" stroke-width=\"22\" stroke-linecap=\"round\"><\/path>\n <path d=\"M0 140l-75 52\" stroke=\"#c08e69\" stroke-width=\"13\" stroke-linecap=\"round\"><\/path>\n <\/g>\n <g transform=\"translate(500 315) rotate(-8)\"><rect width=\"150\" height=\"92\" rx=\"6\" fill=\"#b88950\" stroke=\"#7e542a\" stroke-width=\"4\"><\/rect><path d=\"M0 0l75 50L150 0\" fill=\"#c59a63\"><\/path><\/g>\n <g transform=\"translate(420 0)\"><rect x=\"0\" y=\"0\" width=\"10\" height=\"180\" fill=\"#222\"><\/rect><path d=\"M-40 20h90l-15 55h-60z\" fill=\"#1e2022\"><\/path><circle cx=\"5\" cy=\"62\" r=\"34\" fill=\"#ffd383\" opacity=\".45\"><\/circle><\/g>\n <text x=\"710\" y=\"120\" fill=\"#e7dfcf\" font-size=\"32\" font-family=\"Impact\">TRUTH<\/text><text x=\"700\" y=\"155\" fill=\"#e7dfcf\" font-size=\"32\" font-family=\"Impact\">MATTERS<\/text>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"choice-grid\" data-question=\"m1\">\n <button class=\"choice-btn\" data-value=\"A\"><span class=\"choice-letter\">A<\/span><span>Publish immediately.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"B\"><span class=\"choice-letter\">B<\/span><span>Verify the documents.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"C\"><span class=\"choice-letter\">C<\/span><span>Ignore the source.<\/span><\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback-m1\"><div><strong><\/strong><span><\/span><\/div><button class=\"next-btn\" data-go=\"mission2\">Next mission \u2192<\/button><\/div>\n <div class=\"mission-nav\"><button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button><button class=\"ghost-btn\" data-go=\"mission2\">Skip to mission 2 \u2192<\/button><\/div>\n <\/section>\n\n \n <section id=\"mission2\" class=\"screen mission-screen\" style=\"--accent:var(--blue)\" aria-label=\"Mission 2\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\"><div class=\"mission-number\">2<\/div><div><h2><span>Mission 2:<\/span> Analyze the evidence<\/h2><p>Read and check the documents below. Which one could be a strong proof?<\/p><\/div><\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n <div class=\"evidence-grid\" data-question=\"m2\">\n <button class=\"evidence\" data-value=\"A\">\n <span class=\"doc-tab\">DOCUMENT A<\/span>\n <div class=\"evidence-visual\">\n <svg viewBox=\"0 0 500 310\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Politician speaking to protesters\">\n <rect width=\"500\" height=\"310\" fill=\"#8c9397\"><\/rect>\n <rect y=\"0\" width=\"500\" height=\"170\" fill=\"#bfc3c2\"><\/rect>\n <g fill=\"#5c6264\"><rect x=\"50\" y=\"0\" width=\"45\" height=\"180\"><\/rect><rect x=\"145\" y=\"0\" width=\"45\" height=\"180\"><\/rect><rect x=\"240\" y=\"0\" width=\"45\" height=\"180\"><\/rect><rect x=\"335\" y=\"0\" width=\"45\" height=\"180\"><\/rect><\/g>\n <g fill=\"#20272b\"><circle cx=\"80\" cy=\"220\" r=\"25\"><\/circle><circle cx=\"145\" cy=\"210\" r=\"24\"><\/circle><circle cx=\"225\" cy=\"220\" r=\"28\"><\/circle><circle cx=\"410\" cy=\"215\" r=\"25\"><\/circle><\/g>\n <g fill=\"#c9b99b\"><rect x=\"20\" y=\"130\" width=\"90\" height=\"60\" transform=\"rotate(-7 20 130)\"><\/rect><rect x=\"115\" y=\"125\" width=\"85\" height=\"60\" transform=\"rotate(5 115 125)\"><\/rect><rect x=\"360\" y=\"135\" width=\"100\" height=\"62\" transform=\"rotate(-4 360 135)\"><\/rect><\/g>\n <g transform=\"translate(270 50)\"><circle cx=\"70\" cy=\"70\" r=\"38\" fill=\"#c59a75\"><\/circle><path d=\"M37 59q32-55 68-5v26q-10-24-68-5z\" fill=\"#6c706f\"><\/path><path d=\"M20 122q55-30 100 0l18 150H0z\" fill=\"#2c3843\"><\/path><path d=\"M48 122h45l-12 34H60z\" fill=\"#f2f1ed\"><\/path><path d=\"M70 156l8 85\" stroke=\"#9c422a\" stroke-width=\"9\"><\/path><path d=\"M24 158l-70 40M109 158l66 25\" stroke=\"#c59a75\" stroke-width=\"16\" stroke-linecap=\"round\"><\/path><\/g>\n <\/svg>\n <\/div>\n <div class=\"caption-slip\">Photo taken: 05\/03\/2013<br>Location: Parliament Grounds<\/div>\n <p class=\"evidence-summary\">A picture of the Prime Minister talking to protesters outside Parliament.<\/p>\n <\/button>\n <button class=\"evidence\" data-value=\"B\">\n <span class=\"doc-tab\">DOCUMENT B<\/span>\n <div class=\"evidence-visual\">\n <svg viewBox=\"0 0 500 310\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Politician posing with a community campaigner\">\n <rect width=\"500\" height=\"310\" fill=\"#143762\"><\/rect>\n <text x=\"300\" y=\"55\" fill=\"#d6e1ef\" opacity=\".7\" font-size=\"28\" font-family=\"Arial\">A fairer future<\/text>\n <g transform=\"translate(55 30)\"><circle cx=\"100\" cy=\"80\" r=\"42\" fill=\"#c59a75\"><\/circle><path d=\"M58 68q28-50 75-10v25q-14-22-75-7z\" fill=\"#6d7070\"><\/path><path d=\"M38 130q65-30 122 0l10 160H20z\" fill=\"#2b3742\"><\/path><path d=\"M85 130h35l-7 42H95z\" fill=\"#f0eee7\"><\/path><path d=\"M100 172l5 90\" stroke=\"#9f3f2b\" stroke-width=\"8\"><\/path><\/g>\n <g transform=\"translate(260 38)\"><circle cx=\"80\" cy=\"80\" r=\"40\" fill=\"#9f6c4e\"><\/circle><path d=\"M45 65q35-52 72-3v25q-18-19-72-5z\" fill=\"#221916\"><\/path><path d=\"M25 135q60-35 115 0l15 155H10z\" fill=\"#20252a\"><\/path><circle cx=\"82\" cy=\"195\" r=\"42\" fill=\"none\" stroke=\"#e6e6e6\" stroke-width=\"6\"><\/circle><circle cx=\"67\" cy=\"185\" r=\"9\" fill=\"#e6e6e6\"><\/circle><circle cx=\"97\" cy=\"185\" r=\"9\" fill=\"#e6e6e6\"><\/circle><path d=\"M55 220q28-22 54 0\" stroke=\"#e6e6e6\" stroke-width=\"7\"><\/path><\/g>\n <\/svg>\n <\/div>\n <div class=\"caption-slip\">Photo taken: Unknown date<br>Location: Unknown<\/div>\n <p class=\"evidence-summary\">A picture of the Prime Minister with a community campaigner at a public event.<\/p>\n <\/button>\n <button class=\"evidence\" data-value=\"C\">\n <span class=\"doc-tab\">DOCUMENT C<\/span>\n <div class=\"contract-doc\">\n <h4>CONFIDENTIAL AGREEMENT<\/h4>\n <p><strong>AGREEMENT BETWEEN THE GOVERNMENT AND THE NATIONAL ADVISORY COUNCIL<\/strong><\/p>\n <p>This agreement is made on 02\/06\/2026 between the Government and the Council.<\/p>\n <p><strong>1. Purpose<\/strong><br>The parties agree to implement the measures described in this agreement throughout public institutions and events.<\/p>\n <p><strong>2. Commitments<\/strong><br>The Government and the Council agree to carry out the attached schedule.<\/p>\n <p><strong>3. Confidentiality<\/strong><br>The terms must not be disclosed without prior consent, except where required by law.<\/p>\n <p style=\"margin-top:24px\">Signed for the Government Signed for the Council<\/p>\n <div class=\"stamp\">CONFIDENTIAL<\/div>\n <\/div>\n <div class=\"caption-slip\">Signed: 02\/06\/2026<\/div>\n <p class=\"evidence-summary\">A signed confidential agreement between the Government and a national advisory council.<\/p>\n <\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback-m2\"><div><strong><\/strong><span><\/span><\/div><button class=\"next-btn\" data-go=\"mission3\">Next mission \u2192<\/button><\/div>\n <div class=\"mission-nav\"><button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button><button class=\"solid-btn\" id=\"submitEvidence\">Submit selected document<\/button><\/div>\n <\/section>\n\n \n <section id=\"mission3\" class=\"screen mission-screen\" style=\"--accent:var(--purple)\" aria-label=\"Mission 3\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\"><div class=\"mission-number\">3<\/div><div><h2><span>Mission 3:<\/span> Protect your source<\/h2><p>The authorities ask you to reveal your source. What should an investigative journalist do?<\/p><\/div><\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n <div class=\"desk-scene\">\n <svg viewBox=\"0 0 1400 520\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Confidential folder, padlock, anonymous source photo, phone and USB drive\">\n <defs><linearGradient id=\"deskWood\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop stop-color=\"#2c170d\"><\/stop><stop offset=\".55\" stop-color=\"#5b341f\"><\/stop><stop offset=\"1\" stop-color=\"#1c0f0a\"><\/stop><\/linearGradient><radialGradient id=\"lamp2\"><stop stop-color=\"#ffd384\" stop-opacity=\".6\"><\/stop><stop offset=\"1\" stop-color=\"#ffd384\" stop-opacity=\"0\"><\/stop><\/radialGradient><\/defs>\n <rect width=\"1400\" height=\"520\" fill=\"url(#deskWood)\"><\/rect>\n <ellipse cx=\"1160\" cy=\"90\" rx=\"300\" ry=\"230\" fill=\"url(#lamp2)\"><\/ellipse>\n <g transform=\"translate(80 110) rotate(-4)\"><rect width=\"610\" height=\"300\" rx=\"10\" fill=\"#8b653d\" stroke=\"#4f351f\" stroke-width=\"7\"><\/rect><rect x=\"20\" y=\"-18\" width=\"230\" height=\"60\" rx=\"10\" fill=\"#9d7446\"><\/rect><text x=\"70\" y=\"185\" fill=\"#492955\" font-size=\"64\" font-family=\"Impact\">CONFIDENTIAL<\/text><\/g>\n <g transform=\"translate(520 110)\"><path d=\"M30 120v-55a70 70 0 0 1 140 0v55\" fill=\"none\" stroke=\"#d3c3a8\" stroke-width=\"24\"><\/path><rect x=\"0\" y=\"110\" width=\"205\" height=\"190\" rx=\"18\" fill=\"#22262a\" stroke=\"#6c4a85\" stroke-width=\"10\"><\/rect><circle cx=\"102\" cy=\"195\" r=\"22\" fill=\"#b99bd2\"><\/circle><rect x=\"94\" y=\"205\" width=\"16\" height=\"50\" fill=\"#b99bd2\"><\/rect><\/g>\n <g transform=\"translate(760 85) rotate(5)\"><rect width=\"330\" height=\"230\" fill=\"#ded3bf\" stroke=\"#272421\" stroke-width=\"8\"><\/rect><rect x=\"18\" y=\"18\" width=\"294\" height=\"194\" fill=\"#111a21\"><\/rect><circle cx=\"165\" cy=\"95\" r=\"52\" fill=\"#0b0f12\"><\/circle><path d=\"M90 190q80-120 150 0\" fill=\"#0b0f12\"><\/path><circle cx=\"165\" cy=\"92\" r=\"24\" fill=\"#1f2428\"><\/circle><\/g>\n <g transform=\"translate(1110 85) rotate(8)\"><rect width=\"165\" height=\"285\" rx=\"28\" fill=\"#11171c\" stroke=\"#4c5155\" stroke-width=\"8\"><\/rect><circle cx=\"82\" cy=\"90\" r=\"34\" fill=\"#27333c\"><\/circle><text x=\"42\" y=\"145\" fill=\"#8da0ad\" font-family=\"Arial\" font-size=\"20\">UNKNOWN<\/text><circle cx=\"52\" cy=\"230\" r=\"22\" fill=\"#267544\"><\/circle><circle cx=\"115\" cy=\"230\" r=\"22\" fill=\"#8f2f2b\"><\/circle><\/g>\n <g transform=\"translate(860 365) rotate(-8)\"><rect width=\"250\" height=\"92\" rx=\"18\" fill=\"#252a2e\" stroke=\"#73777a\" stroke-width=\"5\"><\/rect><rect x=\"-62\" y=\"20\" width=\"70\" height=\"52\" rx=\"4\" fill=\"#bfc3c4\"><\/rect><circle cx=\"212\" cy=\"46\" r=\"18\" fill=\"none\" stroke=\"#888\" stroke-width=\"7\"><\/circle><\/g>\n <g transform=\"translate(1180 330) rotate(5)\"><rect width=\"175\" height=\"150\" fill=\"#d8c8aa\"><\/rect><text x=\"20\" y=\"30\" fill=\"#2d2419\" font-size=\"18\" font-family=\"Georgia\">Notes<\/text><text x=\"20\" y=\"62\" fill=\"#2d2419\" font-size=\"16\" font-family=\"Georgia\">\u2022 Meeting<\/text><text x=\"20\" y=\"86\" fill=\"#2d2419\" font-size=\"16\" font-family=\"Georgia\">\u2022 8pm<\/text><text x=\"20\" y=\"110\" fill=\"#2d2419\" font-size=\"16\" font-family=\"Georgia\">\u2022 Location<\/text><\/g>\n <g transform=\"translate(1100 -30)\"><path d=\"M0 0h250l-40 115H40z\" fill=\"#17191a\"><\/path><circle cx=\"130\" cy=\"70\" r=\"80\" fill=\"#ffd384\" opacity=\".3\"><\/circle><\/g>\n <\/svg>\n <\/div>\n <div class=\"choice-grid\" data-question=\"m3\">\n <button class=\"choice-btn\" data-value=\"A\"><span class=\"choice-letter\">A<\/span><span>Protect confidential sources.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"B\"><span class=\"choice-letter\">B<\/span><span>Reveal everything immediately.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"C\"><span class=\"choice-letter\">C<\/span><span>Delete the investigation.<\/span><\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback-m3\"><div><strong><\/strong><span><\/span><\/div><button class=\"next-btn\" data-go=\"mission4\">Next mission \u2192<\/button><\/div>\n <div class=\"mission-nav\"><button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button><button class=\"ghost-btn\" data-go=\"mission4\">Skip to mission 4 \u2192<\/button><\/div>\n <\/section>\n\n \n <section id=\"mission4\" class=\"screen mission-screen\" style=\"--accent:var(--teal)\" aria-label=\"Mission 4\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\"><div class=\"mission-number\">4<\/div><div><h2><span>Mission 4:<\/span> Public interest or national security?<\/h2><p>This is the crucial decision.<\/p><\/div><\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n <div class=\"m4-layout\">\n <article class=\"paper decision-copy\"><strong>What should you publish?<\/strong>The government says publishing these documents could threaten national security.<br><br>But the documents reveal abuses of power.<br><br>Choose the most responsible option.<\/article>\n <div class=\"crowd-scene\">\n <svg viewBox=\"0 0 1000 540\" preserveAspectRatio=\"xMidYMid slice\" aria-label=\"Laptop with documents overlooking a government building and public demonstration\">\n <defs><linearGradient id=\"storm\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop stop-color=\"#24313c\"><\/stop><stop offset=\"1\" stop-color=\"#071016\"><\/stop><\/linearGradient><linearGradient id=\"desk4\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop stop-color=\"#5a341d\"><\/stop><stop offset=\"1\" stop-color=\"#22120b\"><\/stop><\/linearGradient><\/defs>\n <rect width=\"1000\" height=\"540\" fill=\"url(#storm)\"><\/rect>\n <path d=\"M340 270h330V120l-165-90-165 90z\" fill=\"#353b40\" stroke=\"#81898c\" stroke-width=\"6\"><\/path><path d=\"M305 275h400v30H305zM365 135h45v135h-45zM455 135h45v135h-45zM545 135h45v135h-45zM635 135h45v135h-45z\" fill=\"#282c2f\"><\/path>\n <g fill=\"#cfb275\"><rect x=\"380\" y=\"160\" width=\"12\" height=\"25\"><\/rect><rect x=\"470\" y=\"160\" width=\"12\" height=\"25\"><\/rect><rect x=\"560\" y=\"160\" width=\"12\" height=\"25\"><\/rect><rect x=\"650\" y=\"160\" width=\"12\" height=\"25\"><\/rect><\/g>\n <g fill=\"#101417\"><circle cx=\"140\" cy=\"330\" r=\"28\"><\/circle><circle cx=\"210\" cy=\"340\" r=\"26\"><\/circle><circle cx=\"285\" cy=\"330\" r=\"31\"><\/circle><circle cx=\"710\" cy=\"335\" r=\"28\"><\/circle><circle cx=\"785\" cy=\"340\" r=\"27\"><\/circle><circle cx=\"860\" cy=\"330\" r=\"30\"><\/circle><\/g>\n <g fill=\"#d8c7a6\"><rect x=\"115\" y=\"240\" width=\"110\" height=\"70\" transform=\"rotate(-5 115 240)\"><\/rect><rect x=\"730\" y=\"235\" width=\"120\" height=\"75\" transform=\"rotate(4 730 235)\"><\/rect><rect x=\"830\" y=\"250\" width=\"100\" height=\"65\" transform=\"rotate(-4 830 250)\"><\/rect><\/g>\n <text x=\"132\" y=\"268\" fill=\"#17120e\" font-family=\"Impact\" font-size=\"20\">TRUTH<\/text><text x=\"135\" y=\"294\" fill=\"#17120e\" font-family=\"Impact\" font-size=\"20\">MATTERS<\/text><text x=\"744\" y=\"265\" fill=\"#17120e\" font-family=\"Impact\" font-size=\"18\">TRANSPARENCY<\/text><text x=\"770\" y=\"291\" fill=\"#17120e\" font-family=\"Impact\" font-size=\"18\">NOW<\/text>\n <rect y=\"360\" width=\"1000\" height=\"180\" fill=\"url(#desk4)\"><\/rect>\n <g transform=\"translate(250 280)\"><path d=\"M0 0h500l-35 210H35z\" fill=\"#252c32\" stroke=\"#6b7175\" stroke-width=\"6\"><\/path><rect x=\"45\" y=\"20\" width=\"410\" height=\"150\" fill=\"#15212a\"><\/rect><rect x=\"80\" y=\"45\" width=\"330\" height=\"108\" fill=\"#e2dccd\"><\/rect><g fill=\"#111\"><rect x=\"100\" y=\"62\" width=\"190\" height=\"9\"><\/rect><rect x=\"100\" y=\"82\" width=\"260\" height=\"9\"><\/rect><rect x=\"100\" y=\"102\" width=\"220\" height=\"9\"><\/rect><rect x=\"100\" y=\"122\" width=\"250\" height=\"9\"><\/rect><\/g><text x=\"330\" y=\"70\" fill=\"#a42222\" font-size=\"18\" font-family=\"Impact\">CLASSIFIED<\/text><path d=\"M35 210h430l45 35H-10z\" fill=\"#1c2227\"><\/path><\/g>\n <g transform=\"translate(60 385) rotate(-4)\"><rect width=\"210\" height=\"100\" rx=\"8\" fill=\"#a87945\"><\/rect><text x=\"30\" y=\"58\" fill=\"#8c211d\" font-size=\"30\" font-family=\"Impact\">CONFIDENTIAL<\/text><\/g>\n <g transform=\"translate(790 370)\"><rect width=\"150\" height=\"120\" rx=\"10\" fill=\"#d3c29f\"><\/rect><text x=\"18\" y=\"28\" fill=\"#1f1710\" font-size=\"16\" font-family=\"Georgia\">Investigation Notes<\/text><text x=\"18\" y=\"56\" fill=\"#1f1710\" font-size=\"14\" font-family=\"Georgia\">\u2022 Intimidation<\/text><text x=\"18\" y=\"80\" fill=\"#1f1710\" font-size=\"14\" font-family=\"Georgia\">\u2022 Surveillance<\/text><text x=\"18\" y=\"104\" fill=\"#1f1710\" font-size=\"14\" font-family=\"Georgia\">\u2022 Cover-ups<\/text><\/g>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"choice-grid\" data-question=\"m4\">\n <button class=\"choice-btn\" data-value=\"A\"><span class=\"choice-letter\">A<\/span><span>Publish everything.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"B\"><span class=\"choice-letter\">B<\/span><span>Publish selected, verified information.<\/span><\/button>\n <button class=\"choice-btn\" data-value=\"C\"><span class=\"choice-letter\">C<\/span><span>Publish nothing.<\/span><\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback-m4\"><div><strong><\/strong><span><\/span><\/div><button class=\"next-btn\" data-go=\"mission5\">Final mission \u2192<\/button><\/div>\n <div class=\"mission-nav\"><button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button><button class=\"ghost-btn\" data-go=\"mission5\">Skip to final mission \u2192<\/button><\/div>\n <\/section>\n\n \n <section id=\"mission5\" class=\"screen mission-screen\" style=\"--accent:var(--orange)\" aria-label=\"Final mission\">\n <div class=\"mission-header\">\n <div class=\"mission-title-wrap\">\n <div class=\"mission-number\">\u2605<\/div>\n <div>\n <h2><span>Final mission:<\/span> Historical cases<\/h2>\n <p>Choose the correct answer for each investigation.<\/p>\n <\/div>\n <\/div>\n <div class=\"progress-chip\">Score<br><b data-score=\"\">0<\/b> points<\/div>\n <\/div>\n\n <div class=\"historical-quiz\" id=\"historicalQuiz\">\n <article class=\"history-case\" data-case=\"watergate\">\n <span class=\"case-label\">1st case<\/span>\n <h3>Journalists uncovered political spying and a cover-up during a presidential election. What is the name of this scandal?<\/h3>\n <div class=\"case-options\" role=\"group\" aria-label=\"Watergate question\">\n <button class=\"case-option\" type=\"button\" data-value=\"watergate\"><span class=\"option-letter\">A<\/span><span>Watergate scandal<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"twin-towers\"><span class=\"option-letter\">B<\/span><span>Twin Towers<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"muslim-murder\"><span class=\"option-letter\">C<\/span><span>Murder of a Muslim<\/span><\/button>\n <\/div>\n <div class=\"case-status\" aria-live=\"polite\">Select one answer.<\/div>\n <\/article>\n\n <article class=\"history-case\" data-case=\"snowden\">\n <span class=\"case-label\">2nd case<\/span>\n <h3>An American contractor revealed mass-surveillance programs used by the NSA. What is his name?<\/h3>\n <div class=\"case-options\" role=\"group\" aria-label=\"Edward Snowden question\">\n <button class=\"case-option\" type=\"button\" data-value=\"snowden\"><span class=\"option-letter\">A<\/span><span>Edward Snowden<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"assange\"><span class=\"option-letter\">B<\/span><span>Julian Assange<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"george-trump\"><span class=\"option-letter\">C<\/span><span>George Trump<\/span><\/button>\n <\/div>\n <div class=\"case-status\" aria-live=\"polite\">Select one answer.<\/div>\n <\/article>\n\n <article class=\"history-case\" data-case=\"pentagon\">\n <span class=\"case-label\">3rd case \u00b7 final<\/span>\n <h3>Secret military documents about the Vietnam War were leaked to newspapers. What were these documents called?<\/h3>\n <div class=\"case-options\" role=\"group\" aria-label=\"Pentagon Papers question\">\n <button class=\"case-option\" type=\"button\" data-value=\"pentagon\"><span class=\"option-letter\">A<\/span><span>Pentagon Papers<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"walking-post\"><span class=\"option-letter\">B<\/span><span>The Walking Post<\/span><\/button>\n <button class=\"case-option\" type=\"button\" data-value=\"game-of-dark\"><span class=\"option-letter\">C<\/span><span>The Game of Dark<\/span><\/button>\n <\/div>\n <div class=\"case-status\" aria-live=\"polite\">Select one answer.<\/div>\n <\/article>\n <\/div>\n\n <div class=\"feedback\" id=\"feedback-m5\">\n <div><strong><\/strong><span><\/span><\/div>\n <button class=\"next-btn\" data-go=\"result\">View your medal \u2192<\/button>\n <\/div>\n <div class=\"mission-nav\">\n <button class=\"ghost-btn\" data-go=\"home\">\u2190 Back to menu<\/button>\n <button class=\"solid-btn\" id=\"finishCases\" disabled>Finish case file<\/button>\n <\/div>\n <\/section>\n \n <section id=\"result\" class=\"screen\" aria-label=\"Final result\">\n <div class=\"result-wrap\">\n <article class=\"result-card\">\n <div class=\"medal\" id=\"medalIcon\">\u2605<\/div>\n <div class=\"kicker\">Case file complete<\/div>\n <h2 id=\"medalTitle\">Gold medal<\/h2>\n <div class=\"score\"><span id=\"finalScore\">0<\/span> points<\/div>\n <p id=\"medalMessage\">The truth is uncovered. Well done, investigator.<\/p>\n <div class=\"result-actions\"><button class=\"solid-btn\" data-go=\"home\">Back to missions<\/button><button class=\"ghost-btn\" id=\"playAgain\">Play again<\/button><\/div>\n <\/article>\n <\/div>\n <\/section>\n <\/div>\n\n <div class=\"modal\" id=\"howModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"howTitle\">\n <div class=\"modal-card\">\n <h3 id=\"howTitle\">How to play<\/h3>\n <p>Complete the five missions. Select the answer that best reflects responsible investigative journalism.<\/p>\n <ul>\n <li><strong>+3 points<\/strong> for a correct answer on the first try.<\/li>\n <li><strong>\u22121 point<\/strong> for every wrong attempt.<\/li>\n <li>The final mission contains three multiple-choice questions about historical cases.<\/li>\n <\/ul>\n <p>Your progress is saved automatically in this browser.<\/p>\n <button class=\"solid-btn\" id=\"closeHow\">Start investigating<\/button>\n <\/div>\n <\/div>\n\n <script>\n (() => {\n const answers = {\n m1: { correct: 'B', success: 'Good choice. A responsible journalist verifies documents before publishing.', wrong: 'Not yet. Think about verification and source credibility.' },\n m2: { correct: 'C', success: 'Correct. A signed, dated agreement can be stronger evidence than an undated photograph.', wrong: 'This is not the strongest proof. Check the source, date, context and whether the evidence directly supports the claim.' },\n m3: { correct: 'A', success: 'Correct. Protecting confidential sources is a core principle of investigative journalism.', wrong: 'That choice could endanger the source or destroy the investigation.' },\n m4: { correct: 'B', success: 'Correct. Publishing selected, verified information can serve the public interest while reducing unnecessary harm.', wrong: 'Consider proportionality: inform the public, verify the facts and avoid avoidable harm.' }\n };\n\n const STORAGE_KEY = 'ijc-state-final-qcm-v2';\n const historicalAnswers = {\n watergate: {\n correct: 'watergate',\n explanation: 'Correct. The Watergate scandal began with the 1972 break-in and the political cover-up that followed.'\n },\n snowden: {\n correct: 'snowden',\n explanation: 'Correct. Edward Snowden disclosed classified information about large-scale surveillance programs.'\n },\n pentagon: {\n correct: 'pentagon',\n explanation: 'Correct. The Pentagon Papers were secret documents about United States involvement in the Vietnam War.'\n }\n };\n const defaultState = {\n score: 0,\n completed: { m1:false, m2:false, m3:false, m4:false, m5:false },\n attempts: { m1:0, m2:0, m3:0, m4:0 },\n awarded: { m1:false, m2:false, m3:false, m4:false, m5:false },\n historical: { watergate:false, snowden:false, pentagon:false },\n historicalAttempts: { watergate:0, snowden:0, pentagon:0 },\n sound: true\n };\n\n let state = loadState();\n let selectedEvidence = null;\n\n const screens = [...document.querySelectorAll('.screen')];\n const scoreEls = [...document.querySelectorAll('[data-score]')];\n const soundBtn = document.getElementById('soundBtn');\n const app = document.getElementById('ijc-app');\n const fullscreenBtn = document.getElementById('fullscreenBtn');\n\n function nativeFullscreenElement() {\n return document.fullscreenElement || document.webkitFullscreenElement || null;\n }\n\n function updateFullscreenButton() {\n const active = app.classList.contains('immersive') || nativeFullscreenElement() === app;\n fullscreenBtn.innerHTML = active\n ? '<span aria-hidden=\"true\">\u00d7<\/span> Exit full screen'\n : '<span aria-hidden=\"true\">\u26f6<\/span> Full screen';\n fullscreenBtn.setAttribute('aria-pressed', String(active));\n fullscreenBtn.title = active ? 'Exit full screen' : 'Open the game in full screen';\n }\n\n async function enterImmersive() {\n app.classList.add('immersive');\n document.body.classList.add('ijc-lock');\n updateFullscreenButton();\n\n try {\n if (!nativeFullscreenElement()) {\n if (app.requestFullscreen) {\n await app.requestFullscreen({ navigationUI: 'hide' });\n } else if (app.webkitRequestFullscreen) {\n app.webkitRequestFullscreen();\n }\n }\n } catch (error) {\n \/\/ The fixed-position immersive fallback remains active when an\n \/\/ embedded iframe blocks the native Fullscreen API.\n }\n app.scrollTop = 0;\n window.scrollTo({ top: 0, behavior: 'auto' });\n }\n\n async function exitImmersive() {\n try {\n if (document.fullscreenElement && document.exitFullscreen) {\n await document.exitFullscreen();\n } else if (document.webkitFullscreenElement && document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n }\n } catch (error) {}\n app.classList.remove('immersive');\n document.body.classList.remove('ijc-lock');\n updateFullscreenButton();\n }\n\n function toggleImmersive() {\n const active = app.classList.contains('immersive') || nativeFullscreenElement() === app;\n return active ? exitImmersive() : enterImmersive();\n }\n\n fullscreenBtn.addEventListener('click', toggleImmersive);\n\n function syncFullscreenState() {\n if (!nativeFullscreenElement()) {\n app.classList.remove('immersive');\n document.body.classList.remove('ijc-lock');\n }\n updateFullscreenButton();\n }\n document.addEventListener('fullscreenchange', syncFullscreenState);\n document.addEventListener('webkitfullscreenchange', syncFullscreenState);\n\n function loadState() {\n try {\n const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));\n return saved ? {\n ...defaultState,\n ...saved,\n completed: { ...defaultState.completed, ...(saved.completed || {}) },\n attempts: { ...defaultState.attempts, ...(saved.attempts || {}) },\n awarded: { ...defaultState.awarded, ...(saved.awarded || {}) },\n historical: { ...defaultState.historical, ...(saved.historical || {}) },\n historicalAttempts: { ...defaultState.historicalAttempts, ...(saved.historicalAttempts || {}) }\n } : structuredClone(defaultState);\n } catch { return structuredClone(defaultState); }\n }\n\n function saveState() {\n try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (error) {}\n renderState();\n }\n\n function renderState() {\n scoreEls.forEach(el => el.textContent = state.score);\n document.querySelectorAll('.mission-card').forEach(card => {\n const key = 'm' + card.dataset.mission;\n card.classList.toggle('done', !!state.completed[key]);\n });\n soundBtn.textContent = `Sound: ${state.sound ? 'on' : 'off'}`;\n soundBtn.setAttribute('aria-pressed', String(state.sound));\n renderHistoricalState();\n }\n\n function renderHistoricalState() {\n let solvedCount = 0;\n document.querySelectorAll('.history-case').forEach(caseCard => {\n const id = caseCard.dataset.case;\n const solved = !!state.historical[id];\n if (solved) solvedCount += 1;\n caseCard.classList.toggle('solved', solved);\n const status = caseCard.querySelector('.case-status');\n caseCard.querySelectorAll('.case-option').forEach(option => {\n const correct = option.dataset.value === historicalAnswers[id].correct;\n option.disabled = solved;\n option.classList.toggle('correct', solved && correct);\n if (solved) option.classList.remove('wrong');\n });\n if (solved && status) {\n status.className = 'case-status ok';\n status.textContent = historicalAnswers[id].explanation;\n }\n });\n const finish = document.getElementById('finishCases');\n if (finish) finish.disabled = solvedCount !== Object.keys(historicalAnswers).length || state.completed.m5;\n }\n\n function showScreen(id) {\n screens.forEach(s => s.classList.toggle('active', s.id === id));\n window.scrollTo({top:0, behavior:'smooth'});\n if (id === 'result') renderResult();\n if (state.sound) tone(420, .06);\n }\n\n function tone(freq = 440, duration = .08) {\n if (!state.sound) return;\n try {\n const ctx = new (window.AudioContext || window.webkitAudioContext)();\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.type = 'sine'; osc.frequency.value = freq;\n gain.gain.setValueAtTime(.05, ctx.currentTime);\n gain.gain.exponentialRampToValueAtTime(.0001, ctx.currentTime + duration);\n osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + duration);\n } catch {}\n }\n\n document.addEventListener('click', e => {\n const go = e.target.closest('[data-go]');\n if (!go) return;\n if (go.matches('.start-big, .mission-card') && !app.classList.contains('immersive') && !nativeFullscreenElement()) {\n enterImmersive();\n }\n showScreen(go.dataset.go);\n });\n\n document.querySelectorAll('.choice-grid[data-question]').forEach(grid => {\n const q = grid.dataset.question;\n grid.addEventListener('click', e => {\n const btn = e.target.closest('.choice-btn');\n if (!btn || state.completed[q]) return;\n state.attempts[q] += 1;\n const isCorrect = btn.dataset.value === answers[q].correct;\n grid.querySelectorAll('.choice-btn').forEach(b => b.classList.remove('selected','wrong','correct'));\n btn.classList.add(isCorrect ? 'correct' : 'wrong');\n if (isCorrect) completeQuestion(q, grid, btn);\n else {\n state.score -= 1;\n saveState();\n showFeedback(q, false, answers[q].wrong);\n tone(170, .12);\n }\n });\n });\n\n function completeQuestion(q, grid, btn) {\n if (!state.awarded[q]) {\n state.score += state.attempts[q] === 1 ? 3 : 0;\n state.awarded[q] = true;\n }\n state.completed[q] = true;\n grid.querySelectorAll('button').forEach(b => b.disabled = true);\n btn.classList.add('correct');\n saveState();\n showFeedback(q, true, answers[q].success);\n tone(780, .15);\n }\n\n function showFeedback(q, ok, text) {\n const box = document.getElementById('feedback-' + q);\n if (!box) return;\n box.querySelector('strong').textContent = ok ? 'Correct! ' : 'Try again. ';\n box.querySelector('span').textContent = text;\n box.classList.add('show');\n }\n\n \/\/ Mission 2 evidence selection\n document.querySelectorAll('#mission2 .evidence').forEach(el => {\n el.addEventListener('click', () => {\n if (state.completed.m2) return;\n selectedEvidence = el.dataset.value;\n document.querySelectorAll('#mission2 .evidence').forEach(x => x.classList.toggle('selected', x === el));\n });\n });\n\n document.getElementById('submitEvidence').addEventListener('click', () => {\n if (state.completed.m2) return;\n if (!selectedEvidence) {\n showFeedback('m2', false, 'Select one document first.');\n return;\n }\n state.attempts.m2 += 1;\n const chosen = document.querySelector(`#mission2 .evidence[data-value=\"${selectedEvidence}\"]`);\n const isCorrect = selectedEvidence === answers.m2.correct;\n if (isCorrect) {\n if (!state.awarded.m2) {\n state.score += state.attempts.m2 === 1 ? 3 : 0;\n state.awarded.m2 = true;\n }\n state.completed.m2 = true;\n chosen.classList.add('selected');\n document.querySelectorAll('#mission2 .evidence').forEach(x => x.disabled = true);\n saveState();\n showFeedback('m2', true, answers.m2.success);\n tone(780, .15);\n } else {\n state.score -= 1;\n saveState();\n chosen.classList.remove('selected');\n selectedEvidence = null;\n showFeedback('m2', false, answers.m2.wrong);\n tone(170, .12);\n }\n });\n\n \/\/ Final historical multiple-choice mission\n document.querySelectorAll('.history-case').forEach(caseCard => {\n caseCard.addEventListener('click', event => {\n const option = event.target.closest('.case-option');\n if (!option || state.completed.m5) return;\n\n const caseId = caseCard.dataset.case;\n if (state.historical[caseId]) return;\n\n const answer = historicalAnswers[caseId];\n const status = caseCard.querySelector('.case-status');\n state.historicalAttempts[caseId] += 1;\n caseCard.querySelectorAll('.case-option').forEach(button => button.classList.remove('wrong'));\n\n if (option.dataset.value === answer.correct) {\n state.historical[caseId] = true;\n if (state.historicalAttempts[caseId] === 1) state.score += 1;\n option.classList.add('correct');\n caseCard.classList.add('solved');\n caseCard.querySelectorAll('.case-option').forEach(button => button.disabled = true);\n status.className = 'case-status ok';\n status.textContent = answer.explanation;\n tone(720, .12);\n } else {\n state.score -= 1;\n option.classList.add('wrong');\n status.className = 'case-status error';\n status.textContent = 'Incorrect. Check the historical clue and try again.';\n setTimeout(() => option.classList.remove('wrong'), 650);\n tone(160, .1);\n }\n\n saveState();\n });\n });\n\n document.getElementById('finishCases').addEventListener('click', () => {\n const complete = Object.values(state.historical).every(Boolean);\n if (!complete || state.completed.m5) return;\n state.completed.m5 = true;\n state.awarded.m5 = true;\n saveState();\n showFeedback('m5', true, 'All three historical questions are correct. The case file is complete.');\n tone(900, .2);\n });\n\n function renderResult() {\n const score = state.score;\n document.getElementById('finalScore').textContent = score;\n let title, message, icon, bg;\n if (score >= 13) {\n title = 'Gold medal'; icon = '\u2605'; bg = 'radial-gradient(circle at 35% 30%, #fff1aa, #d29a24 45%, #8d5511 72%)';\n message = 'You are a sharp and resourceful investigative journalist.';\n } else if (score >= 10) {\n title = 'Silver medal'; icon = '\u2605'; bg = 'radial-gradient(circle at 35% 30%, #fff, #aab2b8 45%, #5d666d 72%)';\n message = 'You are on the right path to becoming a great investigative journalist.';\n } else if (score >= 6) {\n title = 'Bronze medal'; icon = '\u2605'; bg = 'radial-gradient(circle at 35% 30%, #ffd0a3, #b66c2f 45%, #6c3418 72%)';\n message = 'You have the essentials. Keep building your verification and judgement skills.';\n } else {\n title = 'Keep investigating'; icon = '\u2726'; bg = 'radial-gradient(circle at 35% 30%, #8fc0d5, #365a69 50%, #182b34 75%)';\n message = 'Review the missions and try again. Good journalism takes practice.';\n }\n const medal = document.getElementById('medalIcon');\n medal.textContent = icon; medal.style.background = bg;\n document.getElementById('medalTitle').textContent = title;\n document.getElementById('medalMessage').textContent = message;\n }\n\n function resetGame() {\n state = structuredClone(defaultState);\n selectedEvidence = null;\n try {\n localStorage.removeItem(STORAGE_KEY);\n localStorage.removeItem('ijc-state');\n } catch (error) {}\n document.querySelectorAll('.choice-btn,.evidence,.case-option').forEach(el => {\n el.disabled = false;\n el.classList.remove('selected','correct','wrong');\n });\n document.querySelectorAll('.history-case').forEach(el => el.classList.remove('solved'));\n document.querySelectorAll('.case-status').forEach(el => {\n el.className = 'case-status';\n el.textContent = 'Select one answer.';\n });\n document.querySelectorAll('.feedback').forEach(f => f.classList.remove('show'));\n document.getElementById('finishCases').disabled = true;\n renderState(); showScreen('home');\n }\n\n document.getElementById('resetBtn').addEventListener('click', () => {\n if (confirm('Reset all scores and progress?')) resetGame();\n });\n document.getElementById('playAgain').addEventListener('click', resetGame);\n soundBtn.addEventListener('click', () => { state.sound = !state.sound; saveState(); if(state.sound) tone(500,.08); });\n\n const modal = document.getElementById('howModal');\n document.getElementById('howBtn').addEventListener('click', () => modal.classList.add('show'));\n document.getElementById('closeHow').addEventListener('click', () => modal.classList.remove('show'));\n modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('show'); });\n document.addEventListener('keydown', e => { if (e.key === 'Escape') modal.classList.remove('show'); });\n\n renderState();\n updateFullscreenButton();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Investigative Journalist Challenge Investigative Journalist Challenge \u26f6 Full screen How to play Sound: on Reset game THE TRUTH ISWORTH PURSUING. \u2713 Investigate\u2713 Question\u2713 Verify\u2713 Report CONFIDENTIAL...<\/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-1306","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1306","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=1306"}],"version-history":[{"count":2,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1306\/revisions"}],"predecessor-version":[{"id":1339,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1306\/revisions\/1339"}],"wp:attachment":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/media?parent=1306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}