Da Outer Heaven a Shadow Moses — Fascicolo Operativo
by PrismRider28664 lines51.6 KB
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Da Outer Heaven a Shadow Moses — Fascicolo Operativo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Courier+Prime:wght@400;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap" rel="stylesheet">
<style>
:root{
--paper:#ece2c4; --paper-2:#ddcfa2; --paper-edge:#b9a877;
--ink:#211a10; --ink-soft:#5c4e34; --ink-faint:#8b7b57;
--desk-0:#050603; --desk-1:#12150c; --desk-2:#1c2411;
--olive:#5c6c30; --olive-dark:#333d1a; --olive-dim:#232b14;
--amber:#eda63f; --amber-soft:#eda63f59;
--stamp:#8c2f26; --redact-a:#0a0a08; --redact-b:#1b1b14;
--neutral:#7c7562;
--font-display:'Black Ops One',system-ui; --font-body:'Newsreader',serif; --font-mono:'Courier Prime',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
margin:0;
background:
radial-gradient(ellipse at 15% -10%, #263117 0%, transparent 50%),
radial-gradient(ellipse at 85% 110%, #1a2210 0%, transparent 45%),
linear-gradient(180deg,var(--desk-1),var(--desk-0) 70%);
color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
position:relative;
}
body::before{
content:"";
position:fixed; inset:0; z-index:70; pointer-events:none;
opacity:.05; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
::selection{background:var(--amber);color:#231b08}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
svg.defs{position:absolute;width:0;height:0;overflow:hidden}
/* progress */
#progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--amber-soft),var(--amber));z-index:80;box-shadow:0 0 8px var(--amber-soft)}
/* nav */
nav.tabs{
position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:0;
background:linear-gradient(180deg,var(--olive-dim),var(--olive-dark));
border-bottom:1px solid #000; overflow-x:auto; scrollbar-width:none; padding:0 .4rem;
box-shadow:0 8px 18px rgba(0,0,0,.35);
}
nav.tabs::-webkit-scrollbar{display:none}
.tab{
flex:0 0 auto; font-family:var(--font-mono); font-weight:700; font-size:.68rem; letter-spacing:.06em;
color:#a9af8c; background:var(--olive-dark); border:none; padding:.55rem .8rem .48rem; margin:.5rem .1rem 0;
cursor:pointer; clip-path:polygon(12% 0%,88% 0%,100% 100%,0% 100%); transition:background .2s,color .2s,transform .15s;
}
.tab:hover{background:var(--olive);color:#eef0df}
.tab.active{background:var(--paper);color:var(--ink);transform:translateY(-2px)}
.tab:focus-visible,button:focus-visible,a:focus-visible{outline:2px dashed var(--amber);outline-offset:2px}
.readout{font-family:var(--font-mono);font-size:.64rem;color:var(--amber);white-space:nowrap;padding:0 .8rem;display:none;opacity:.85}
@media(min-width:760px){.readout{display:block}}
/* sheet */
main.sheet{
position:relative; max-width:780px; margin:2.6rem auto 4rem;
background:
radial-gradient(ellipse at top left, rgba(255,255,255,.32), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(0,0,0,.08), transparent 60%),
var(--paper);
box-shadow:0 40px 90px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.25);
padding:0 0 3rem;
}
@media(max-width:820px){main.sheet{margin:0 auto 2.4rem}}
/* cover */
.cover{position:relative;text-align:center;padding:3.4rem 1.6rem 2.4rem;border-bottom:2px solid var(--ink);overflow:hidden}
.radar{position:absolute;top:12px;right:12px;width:104px;height:104px;opacity:.24;pointer-events:none}
.radar .sweep{transform-origin:52px 52px;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase;margin:0}
.boot-line{font-family:var(--font-mono);font-size:.66rem;color:var(--olive-dark);letter-spacing:.03em;margin:.55rem 0 0;min-height:1.1em}
.boot-line .cursor{display:inline-block;width:.5em;background:var(--olive-dark);animation:blinkcursor 1s steps(1) infinite}
@keyframes blinkcursor{50%{opacity:0}}
.cover h1{font-family:var(--font-display);font-weight:400;line-height:1.05;letter-spacing:.02em;font-size:clamp(2rem,7vw,3.3rem);margin:1rem 0 0;color:var(--ink)}
.cover h1 span{display:block;font-size:.6em;color:var(--stamp);margin-top:.35rem}
.cover .subtitle{font-family:var(--font-body);font-style:italic;font-size:1.2rem;color:var(--ink-soft);margin:1.1rem 0 0}
.meta-row{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.meta-row span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.03em;border:1px solid var(--ink-soft);padding:.28rem .55rem;color:var(--ink-soft)}
.stamp{position:absolute;top:2.4rem;left:50%;transform:translateX(-50%) rotate(-9deg);border:3px solid var(--stamp);color:var(--stamp);font-family:var(--font-display);font-size:.8rem;letter-spacing:.16em;padding:.32rem .7rem;opacity:.88;animation:stampIn .6s cubic-bezier(.2,1.4,.4,1) both;text-align:center;line-height:1.5}
.stamp small{display:block;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.1em;opacity:.8}
@keyframes stampIn{0%{transform:translateX(-50%) rotate(-9deg) scale(2.6);opacity:0}60%{opacity:.9}100%{transform:translateX(-50%) rotate(-9deg) scale(1);opacity:.88}}
.foreword{max-width:52ch;margin:1.7rem auto 0;font-size:.98rem;color:var(--ink-soft);line-height:1.65}
.foreword strong{color:var(--ink)}
/* act divider */
.act{display:flex;align-items:center;gap:1rem;padding:2.2rem 1.8rem;margin:0}
.act-badge{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;background:var(--paper-2);color:var(--ink)}
.act-badge svg{width:22px;height:22px}
.act h3{font-family:var(--font-display);font-weight:400;font-size:.95rem;letter-spacing:.05em;color:var(--ink);margin:0}
.act p{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft);margin:.15rem 0 0}
.act::after{content:"";flex:1 1 auto;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 9px,transparent 9px 15px);opacity:.3}
/* page */
.page{padding:2.3rem 1.8rem 0;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.page.in-view{opacity:1;transform:translateY(0)}
.page-head{display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--ink-soft);padding-bottom:.65rem;margin-bottom:1.25rem}
.page-num{font-family:var(--font-display);font-size:1.9rem;color:var(--stamp);line-height:1;opacity:.85}
.page-eyebrow{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase;margin:0 0 .2rem}
.page-title{font-family:var(--font-body);font-style:italic;font-weight:600;font-size:1.45rem;margin:0;color:var(--ink)}
.page-body{max-width:63ch}
.page-body p{font-size:1.03rem;line-height:1.78;margin:0 0 1.05em;color:var(--ink)}
.page-body p:first-of-type::first-letter{font-family:var(--font-display);font-size:2.4rem;float:left;line-height:.8;padding:.08em .1em 0 0;color:var(--stamp)}
.page-body ul.chain{list-style:none;margin:1.2rem 0;padding:0 0 0 1.4rem;border-left:2px dotted var(--ink-faint)}
.page-body ul.chain li{position:relative;margin:0 0 1.05em;line-height:1.68;font-size:.98rem}
.page-body ul.chain li::before{content:"";position:absolute;left:-1.53rem;top:.4em;width:8px;height:8px;border-radius:50%;background:var(--stamp);box-shadow:0 0 0 3px var(--paper)}
/* redact */
.redact{all:unset;cursor:pointer;display:inline}
.redact .rtext{background:repeating-linear-gradient(135deg,var(--redact-a) 0 6px,var(--redact-b) 6px 12px);color:transparent;border-radius:3px;padding:.02em .35em;transition:color .35s ease,background-color .35s ease;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.redact .rhint{font-family:var(--font-mono);font-size:.62rem;color:var(--olive);margin-left:.4em;letter-spacing:.03em;white-space:nowrap}
.redact .rhint svg{width:10px;height:10px;vertical-align:-1px;margin-right:.15em}
.redact[aria-expanded="true"] .rtext{background:transparent;color:inherit;text-decoration:underline;text-decoration-color:var(--amber-soft);text-underline-offset:.2em}
.redact[aria-expanded="true"] .rhint{color:var(--stamp)}
/* intel note */
.intel-note{max-width:63ch;margin:1.7rem auto;background:var(--paper-2);border:1px dashed var(--ink-soft);padding:1rem 1.1rem;position:relative;font-family:var(--font-mono);font-size:.83rem;line-height:1.6;color:var(--ink-soft)}
.intel-note.r1{transform:rotate(-1deg)} .intel-note.r2{transform:rotate(1deg)} .intel-note.r3{transform:rotate(-.6deg)}
.intel-pin{position:absolute;top:-9px;left:20px;color:var(--olive-dark);background:var(--paper);border-radius:50%;padding:2px}
.intel-label{display:block;font-weight:700;letter-spacing:.06em;color:var(--ink);font-size:.68rem;margin-bottom:.4rem}
/* codec */
.codec{max-width:63ch;margin:1.8rem auto;background:#0c0d08;border:1px solid #000;box-shadow:inset 0 0 0 1px #eda63f26,0 10px 24px rgba(0,0,0,.4);padding:.9rem 1rem 1rem;position:relative;overflow:hidden}
.codec::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.codec-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.62rem;color:var(--amber);letter-spacing:.06em;margin-bottom:.6rem;border-bottom:1px dotted #eda63f4d;padding-bottom:.4rem}
.codec-top .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:.4em;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.codec-portraits{display:flex;align-items:center;gap:.5rem;margin-bottom:.65rem}
.codec-slot{flex:0 0 auto;width:46px;height:58px;border:1px solid #eda63f66;background:repeating-linear-gradient(45deg,#171812 0 4px,#20221a 4px 8px);position:relative;display:flex;align-items:center;justify-content:center}
.codec-slot span{font-family:var(--font-mono);font-weight:700;font-size:.8rem;color:var(--amber);opacity:.85}
.codec-id{font-family:var(--font-mono);font-size:.58rem;color:#c9b389;text-align:center;margin-top:.25rem;letter-spacing:.04em}
.codec-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;height:24px}
.codec-mid i{display:block;width:3px;background:var(--amber);opacity:.65;animation:wave 1.1s ease-in-out infinite}
.codec-mid i:nth-child(1){height:8px;animation-delay:0s}.codec-mid i:nth-child(2){height:16px;animation-delay:.1s}.codec-mid i:nth-child(3){height:22px;animation-delay:.2s}.codec-mid i:nth-child(4){height:12px;animation-delay:.3s}.codec-mid i:nth-child(5){height:18px;animation-delay:.4s}.codec-mid i:nth-child(6){height:9px;animation-delay:.5s}
@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.codec-transcript{font-family:var(--font-mono);font-size:.92rem;line-height:1.55;color:var(--amber);margin:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1)}
.codec.in-view .codec-transcript{clip-path:inset(0 0 0 0)}
.codec-transcript b{color:#f6cf8f;letter-spacing:.02em}
/* timeline */
.timeline{padding:1.6rem 1.8rem 2.2rem;max-width:100%}
.timeline-track{display:flex;align-items:flex-start;justify-content:space-between;position:relative;gap:.4rem;overflow-x:auto;padding-bottom:.4rem}
.timeline-track::before{content:"";position:absolute;top:21px;left:20px;right:20px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-soft) 0 8px,transparent 8px 14px)}
.tnode{flex:1 1 0;min-width:118px;text-align:center;text-decoration:none;color:inherit;position:relative;z-index:1}
.tnode .dot{width:42px;height:42px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);margin:0 auto .5rem;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.tnode .dot svg{width:22px;height:22px;color:var(--ink)}
.tnode:hover .dot{transform:translateY(-3px);background:var(--amber-soft)}
.tnode .yr{font-family:var(--font-mono);font-size:.68rem;color:var(--stamp);display:block}
.tnode .lbl{font-family:var(--font-body);font-style:italic;font-size:.85rem;color:var(--ink);display:block;margin-top:.1rem}
.tnode.ghost .dot{border-style:dashed;color:var(--ink-faint);opacity:.75}
.tnode.ghost .lbl{color:var(--ink-faint)}
.tnode.ghost .yr{color:var(--ink-faint)}
/* dossier cards */
.dossier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem;margin-top:.3rem}
.dcard{background:var(--paper-2);border:1px solid var(--ink-soft);border-left:5px solid var(--neutral);padding:.85rem .9rem;position:relative;transition:transform .15s,box-shadow .15s}
.dcard:hover{transform:translateY(-3px);box-shadow:0 10px 18px rgba(0,0,0,.18)}
.dcard.ally{border-left-color:var(--olive)}
.dcard.enemy{border-left-color:var(--stamp)}
.dcard.double{border-left-color:var(--amber)}
.dcard.shadow{border-left-color:var(--neutral)}
.dcard-top{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.55rem}
.photo-slot{flex:0 0 auto;width:44px;height:56px;border:1px solid var(--ink-soft);background:repeating-linear-gradient(45deg,#d9caa0 0 4px,#c9b988 4px 8px);display:flex;align-items:center;justify-content:center}
.photo-slot span{font-family:var(--font-mono);font-weight:700;font-size:.72rem;color:var(--ink)}
.dcard-file{font-family:var(--font-mono);font-size:.6rem;color:var(--ink-faint);letter-spacing:.05em}
.dcard-name{font-family:var(--font-body);font-weight:600;font-size:1.02rem;color:var(--ink);margin:.1rem 0 .3rem}
.dtag{display:inline-block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;padding:.15rem .4rem;border:1px solid currentColor}
.dcard.ally .dtag{color:var(--olive)} .dcard.enemy .dtag{color:var(--stamp)} .dcard.double .dtag{color:var(--amber-dim,#a97a2e)} .dcard.shadow .dtag{color:var(--neutral)}
.dfield{font-size:.85rem;line-height:1.5;margin:.35rem 0 0;color:var(--ink-soft)}
.dfield b{color:var(--ink);font-weight:600;font-style:normal;display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.1rem}
/* theme tiles */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem;margin-top:.3rem}
.ttile{padding:.9rem 1rem;border-top:2px solid var(--ink)}
.ttile h4{font-family:var(--font-display);font-weight:400;font-size:.78rem;letter-spacing:.03em;margin:0 0 .4rem;color:var(--stamp)}
.ttile p{font-size:.92rem;line-height:1.55;margin:0;color:var(--ink-soft)}
/* table */
.twrap{overflow-x:auto;margin:1.2rem 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.86rem;background:var(--paper-2)}
th,td{border:1px solid var(--ink-soft);padding:.5rem .65rem;text-align:left;vertical-align:top;line-height:1.4}
th{background:var(--olive-dark);color:#dfe3cd;font-family:var(--font-mono);font-size:.63rem;letter-spacing:.03em;text-transform:uppercase}
th .thicon{display:flex;align-items:center;gap:.35rem}
th .thicon svg{width:15px;height:15px;flex:0 0 auto}
tr:nth-child(even) td{background:rgba(0,0,0,.03)}
/* qa */
.qa-list{list-style:none;margin:0;padding:0}
.qa-list li{padding:.75rem 0;border-bottom:1px dashed var(--ink-faint);font-size:.98rem;line-height:1.6}
.qa-list li:last-child{border-bottom:none}
.qa-list .q{font-family:var(--font-mono);color:var(--stamp);font-weight:700;margin-right:.4em}
/* status list */
.status-list{list-style:none;margin:0;padding:0}
.status-list li{padding:.7rem 0;border-bottom:1px solid var(--paper-edge);font-size:.98rem;line-height:1.6}
.status-list li:last-child{border-bottom:none}
.status-list .flag{display:inline-block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;color:var(--amber-dim,#a97a2e);border:1px solid currentColor;padding:.08rem .35rem;margin-right:.5em;vertical-align:1px}
/* refcards */
.refgrid{display:grid;gap:.65rem}
.refcard{border-left:4px solid var(--olive);background:var(--paper-2);padding:.7rem .9rem;font-size:.9rem;line-height:1.55}
.refcard b{color:var(--stamp);font-style:normal}
/* closing */
.caseclosed{text-align:center;padding:2.4rem 1.5rem 1rem;margin-top:.5rem}
.bigstamp{display:inline-block;border:3px solid var(--ink);color:var(--ink);font-family:var(--font-display);font-size:1.05rem;letter-spacing:.14em;padding:.5rem 1.1rem;transform:rotate(-4deg);opacity:.82}
.caseclosed p{font-style:italic;color:var(--ink-soft);margin-top:1.2rem}
.next-file{max-width:63ch;margin:1.8rem auto 0;border:1px solid var(--ink);background:var(--paper-2);padding:1rem 1.1rem;display:flex;align-items:center;gap:.8rem;text-align:left}
.next-file svg{width:26px;height:26px;flex:0 0 auto;color:var(--ink-soft)}
.next-file .nf-title{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;color:var(--ink-soft);margin:0 0 .3rem}
.next-file .nf-name{display:inline-block;background:repeating-linear-gradient(135deg,var(--redact-a) 0 6px,var(--redact-b) 6px 12px);color:transparent;padding:.05em .5em;font-family:var(--font-body);font-style:italic;font-size:1.05rem}
/* top btn */
#top-btn{position:fixed;right:1rem;bottom:1rem;z-index:65;width:2.5rem;height:2.5rem;background:var(--olive-dark);border:1px solid #000;color:#dfe3cd;font-family:var(--font-mono);font-size:1rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
#top-btn.show{opacity:.9;pointer-events:auto}
#top-btn:hover{background:var(--olive)}
.clearfix::after{content:"";display:table;clear:both}
</style>
</head>
<body>
<svg class="defs" aria-hidden="true">
<symbol id="ic-crate" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round">
<path d="M3 8L12 4L21 8L21 17L12 21L3 17Z"/><path d="M3 8L12 12L21 8M12 12V21"/>
</symbol>
<symbol id="ic-drop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round">
<path d="M12 3C12 3 5.5 12 5.5 16.5A6.5 6.5 0 0 0 18.5 16.5C18.5 12 12 3 12 3Z"/>
</symbol>
<symbol id="ic-haz" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4">
<circle cx="12" cy="12" r="9.3"/>
<circle cx="12" cy="12" r="1.9" fill="currentColor" stroke="none"/>
<circle cx="12" cy="6.2" r="2.3" fill="currentColor" stroke="none"/>
<circle cx="16.8" cy="15" r="2.3" fill="currentColor" stroke="none"/>
<circle cx="7.2" cy="15" r="2.3" fill="currentColor" stroke="none"/>
</symbol>
<symbol id="ic-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M7 12.5V6a3 3 0 0 1 6 0v9a5 5 0 0 1-10 0V7"/>
</symbol>
<symbol id="ic-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>
</symbol>
<symbol id="ic-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 12S5.5 5.5 12 5.5 22 12 22 12 18.5 18.5 12 18.5 2 12 2 12Z"/><circle cx="12" cy="12" r="2.6"/>
</symbol>
</svg>
<div id="progress"></div>
<nav class="tabs" id="tabs" aria-label="Indice del fascicolo">
<span class="readout" id="readout">// posizione: copertina</span>
</nav>
<main class="sheet">
<header class="cover">
<svg class="radar" viewBox="0 0 110 110" aria-hidden="true">
<circle cx="55" cy="55" r="50" fill="none" stroke="#5c6c30" stroke-width="1"/>
<circle cx="55" cy="55" r="34" fill="none" stroke="#5c6c30" stroke-width="1"/>
<circle cx="55" cy="55" r="18" fill="none" stroke="#5c6c30" stroke-width="1"/>
<line x1="5" y1="55" x2="105" y2="55" stroke="#5c6c30" stroke-width="1"/>
<line x1="55" y1="5" x2="55" y2="105" stroke="#5c6c30" stroke-width="1"/>
<g class="sweep"><line x1="55" y1="55" x2="55" y2="5" stroke="#eda63f" stroke-width="2"/></g>
</svg>
<div class="stamp">TOP SECRET<small>FOXHOUND EYES ONLY</small></div>
<p class="eyebrow" style="margin-top:3.6rem;">Fascicolo operativo · FOXHOUND Intelligence · Uso riservato</p>
<p class="boot-line" id="bootline" aria-hidden="true"><span class="cursor"> </span></p>
<h1>DA OUTER HEAVEN<span>A SHADOW MOSES</span></h1>
<p class="subtitle">Retrospettiva su Metal Gear, Metal Gear 2: Solid Snake e Metal Gear Solid</p>
<div class="meta-row">
<span>Tre giochi, una domanda</span>
<span>1995 → 1999 → 2005</span>
<span>Preparazione al fascicolo successivo</span>
</div>
<p class="foreword">Il dossier che segue ripercorre l'intera traiettoria di Solid Snake: dalla recluta tradita dal proprio comandante, al figlio che scopre il proprio padre, al clone che rivendica la propria individualità. <strong>Non è solo un riassunto: è una mappa per orientarsi nei pattern, nei temi e nelle domande che il prossimo capitolo erediterà.</strong> Alcuni passaggi sono ancora classificati: toccali per declassificarli.</p>
</header>
<!-- PROLOGO -->
<section class="page" id="prologo" data-tab="PRO" data-title="Come usare questa retrospettiva">
<div class="page-head">
<span class="page-num">00</span>
<div><p class="page-eyebrow">Istruzioni per la lettura</p><h2 class="page-title">Come usare questa retrospettiva</h2></div>
</div>
<div class="page-body">
<p>Tre giochi, un'unica domanda che si ripete e si complica ogni volta: <strong>quanto di ciò che facciamo è davvero nostro?</strong></p>
<p><em>Metal Gear</em> (1987/1995) pone la domanda in modo semplice: un soldato scopre che il suo comandante lo ha usato come pedina. <em>Metal Gear 2</em> (1999) la raddoppia: lo stesso soldato scopre di essere, biologicamente, figlio dell'uomo che lo ha tradito. <em>Metal Gear Solid</em> (2005 nella cronologia interna) la porta alle estreme conseguenze: ogni missione, ogni alleato, ogni "vittoria" si rivela orchestrata da qualcun altro.</p>
<p>Kojima costruisce ogni capitolo come lo specchio, leggermente distorto, di quello precedente. Prima di aprire il prossimo fascicolo della serie, vale la pena guardare l'intera traiettoria in un colpo solo — non per i colpi di scena già consumati, ma per le domande che restano volutamente senza risposta.</p>
</div>
</section>
<!-- TIMELINE -->
<section class="page timeline" id="mappa" data-tab="MAPPA" data-title="Mappa operativa">
<div class="page-head">
<span class="page-num">·</span>
<div><p class="page-eyebrow">Cronologia interna</p><h2 class="page-title">Mappa operativa</h2></div>
</div>
<div class="timeline-track">
<a class="tnode" href="#mg1"><span class="dot"><svg><use href="#ic-crate"/></svg></span><span class="yr">1995</span><span class="lbl">Outer Heaven</span></a>
<a class="tnode" href="#mg2"><span class="dot"><svg><use href="#ic-drop"/></svg></span><span class="yr">1999</span><span class="lbl">Zanzibar Land</span></a>
<a class="tnode" href="#mgs1"><span class="dot"><svg><use href="#ic-haz"/></svg></span><span class="yr">2005</span><span class="lbl">Shadow Moses</span></a>
<span class="tnode ghost"><span class="dot">?</span><span class="yr">FASCICOLO</span><span class="lbl">successivo</span></span>
</div>
</section>
<div class="act">
<span class="act-badge"><svg><use href="#ic-crate"/></svg></span>
<div><h3>PARTE I — METAL GEAR</h3><p>La recluta e la fortezza · Outer Heaven, 1995</p></div>
</div>
<section class="page" id="mg1" data-tab="MG1" data-title="Metal Gear — Outer Heaven (1995)">
<div class="page-head">
<span class="page-num">01</span>
<div><p class="page-eyebrow">Primo capitolo</p><h2 class="page-title">La recluta e la fortezza</h2></div>
</div>
<div class="page-body">
<p>Un giovane soldato di nome in codice Solid Snake viene paracadutato in una fortezza mercenaria per recuperare un agente disperso e scoprire cosa sia il misterioso "Metal Gear". Si muove nell'ombra — letteralmente, nascosto in uno scatolone — libera l'agente Gray Fox, guadagna la fiducia di una resistenza locale e scopre che Metal Gear è un carro armato bipede in grado di lanciare testate nucleari da qualunque terreno, aggirando ogni trattato di non proliferazione.</p>
<p>Il colpo di scena arriva a pochi passi dalla fine: il capo di Outer Heaven, l'uomo che ha ordinato la missione e che via radio ha guidato Snake dritto in una serie di trappole, è il suo stesso comandante, <strong>Big Boss</strong>. Snake distrugge il Metal Gear e sconfigge Big Boss in duello, ma un ultimo messaggio radio — <em>non sono morto, ci rivedremo</em> — chiude il gioco su una minaccia mai davvero risolta.</p>
</div>
<div class="codec">
<div class="codec-top"><span><span class="dot"></span>trasmissione in entrata</span><span>freq ????</span></div>
<div class="codec-portraits">
<div><div class="codec-slot"><span>BB</span></div><div class="codec-id">BIG BOSS</div></div>
<div class="codec-mid"><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><div class="codec-slot"><span>SS</span></div><div class="codec-id">SNAKE</div></div>
</div>
<p class="codec-transcript"><b>BIG BOSS:</b> Infiltrati a Outer Heaven. Trova Gray Fox. Scopri cos'è il Metal Gear. Sei la nostra unica risorsa.</p>
</div>
<aside class="intel-note r1">
<svg class="intel-pin" width="20" height="20"><use href="#ic-pin"/></svg>
<span class="intel-label">Cosa pianta per il futuro</span>
L'idea che l'autorità che ti guida via radio possa essere il tuo peggior nemico; lo scatolone e l'infiltrazione in solitaria come firma stilistica della serie; Gray Fox come alleato salvato da Snake; e Big Boss come figura che sopravvive sempre a sé stessa.
</aside>
</section>
<div class="act">
<span class="act-badge"><svg><use href="#ic-drop"/></svg></span>
<div><h3>PARTE II — METAL GEAR 2</h3><p>Il vero prototipo · Zanzibar Land, 1999</p></div>
</div>
<section class="page" id="mg2" data-tab="MG2" data-title="Metal Gear 2 — Zanzibar Land (1999)">
<div class="page-head">
<span class="page-num">02</span>
<div><p class="page-eyebrow">Secondo capitolo</p><h2 class="page-title">Il vero prototipo</h2></div>
</div>
<div class="page-body">
<p>Se Outer Heaven pone le domande, Zanzibar Land le mette in scena con una maturità sorprendente per un gioco 8-bit — al punto da essere considerato dai fan <em>"il padre di MGS1"</em>, quasi una versione bidimensionale dello stesso identico gioco.</p>
<p>Una crisi energetica globale e la scoperta di un microrganismo capace di produrre petrolio (l'OILIX) spingono una nuova nazione-fortezza, Zanzibar Land, a rapire lo scienziato che lo ha inventato. Richiamato dal ritiro, Snake si infiltra di nuovo, supportato via radio da Roy Campbell, da Master Miller e dall'agente sotto copertura Holly White. Il suo percorso è una catena di rivelazioni a effetto domino:</p>
<ul class="chain">
<li>L'ex leader della resistenza di Outer Heaven, Kyle Schneider, gli racconta che dopo la sua fuga la NATO ha bombardato la fortezza senza pietà — e che a salvare i superstiti è stato proprio Big Boss, ricostruitosi un impero da zero.</li>
<li>Il Dr. Madnar, progettista del primo Metal Gear, si rivela un traditore volontario: umiliato dalla comunità scientifica occidentale, si è offerto a Zanzibar Land pur di continuare il proprio lavoro, arrivando a uccidere lo scienziato che Snake doveva salvare.</li>
<li>Un'alleata, Gustava Heffner, muore in un attacco missilistico a metà gioco — sparato da un Metal Gear pilotato da Gray Fox, ora al servizio di Big Boss. Nel duello finale si scopre che Gray Fox è in realtà Frank Jaeger, l'amore perduto di Gustava.</li>
<li>Nell'ultimo confronto, disarmato, Big Boss rivela a Snake un segreto che ribalta tutto: <button class="redact" aria-expanded="false"><span class="rtext">è suo padre biologico</span><span class="rhint"><svg width="10" height="10"><use href="#ic-lock"/></svg>clicca per declassificare</span></button>.</li>
</ul>
<p>Snake sconfigge Big Boss con un lanciafiamme improvvisato e, sconvolto, si ritira definitivamente tra le montagne dell'Alaska — esattamente dove le forze speciali andranno a riprenderlo all'inizio del capitolo successivo.</p>
</div>
<div class="codec">
<div class="codec-top"><span><span class="dot"></span>trasmissione in entrata</span><span>freq 140.85</span></div>
<div class="codec-portraits">
<div><div class="codec-slot"><span>RC</span></div><div class="codec-id">CAMPBELL</div></div>
<div class="codec-mid"><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><div class="codec-slot"><span>SS</span></div><div class="codec-id">SNAKE</div></div>
</div>
<p class="codec-transcript"><b>CAMPBELL:</b> Snake, il mondo non ti ha dimenticato. Abbiamo bisogno di te un'ultima volta.</p>
</div>
<aside class="intel-note r2">
<svg class="intel-pin" width="20" height="20"><use href="#ic-pin"/></svg>
<span class="intel-label">Cosa pianta per il futuro</span>
La frequenza radio 140.85 di Campbell; il trucco del "bagno delle donne" per scovare una spia; un oggetto a memoria di forma usato come chiave; un alleato misterioso che guida Snake in un campo minato senza farsi riconoscere; e la rivelazione della paternità come detonatore emotivo che Metal Gear Solid riprenderà quasi scena per scena.
</aside>
</section>
<div class="act">
<span class="act-badge"><svg><use href="#ic-haz"/></svg></span>
<div><h3>PARTE III — METAL GEAR SOLID</h3><p>Lo specchio si rompe · Shadow Moses, 2005</p></div>
</div>
<section class="page" id="mgs1" data-tab="MGS1" data-title="Metal Gear Solid — Shadow Moses (2005)">
<div class="page-head">
<span class="page-num">03</span>
<div><p class="page-eyebrow">Terzo capitolo</p><h2 class="page-title">Lo specchio si rompe</h2></div>
</div>
<div class="page-body">
<p>Un commando di soldati Genoma, guidato da membri rinnegati di FOXHOUND che si fanno chiamare "i figli di Big Boss", occupa l'impianto nucleare di Shadow Moses e minaccia un lancio atomico se non riceverà i resti genetici di Big Boss e un miliardo di dollari. Richiamato ancora una volta dal ritiro, Snake si infiltra da solo, guidato via codec da Campbell, dalla dottoressa Naomi Hunter, da Mei Ling e da un Master Miller che dice di vivere ormai in pensione.</p>
<p>Quello che sembra un classico action-infiltration si sgretola passo dopo passo: il "capo della DARPA" liberato all'inizio è in realtà un impostore capace di imitare persino il sangue delle vittime; il ninja cibernetico che semina il terrore per metà gioco è Gray Fox, creduto morto a Zanzibar Land e trasformato in cavia cyborg; la dottoressa Naomi nasconde un'identità rubata e una vendetta personale; e <button class="redact" aria-expanded="false"><span class="rtext">il vero Master Miller era già morto — a parlargli per gran parte della missione era Liquid Snake sotto mentite spoglie</span><span class="rhint"><svg width="10" height="10"><use href="#ic-lock"/></svg>clicca per declassificare</span></button>.</p>
<p>Il colpo di grazia arriva con la rivelazione di <strong>Les Enfants Terribles</strong>: <button class="redact" aria-expanded="false"><span class="rtext">Snake e Liquid sono entrambi cloni di Big Boss</span><span class="rhint"><svg width="10" height="10"><use href="#ic-lock"/></svg>clicca per declassificare</span></button>, prodotti nel 1972 per creare il soldato perfetto, uno portatore dei geni dominanti e l'altro dei recessivi. È questo, non l'ideologia, il vero motore dell'odio di Liquid. Nel duello finale sopra Metal Gear REX, Snake vince non come strumento di alcun governo ma per la prima volta per una scelta interamente propria — e a uccidere davvero Liquid è FoxDie, un virus a bersaglio genetico che il Pentagono aveva impiantato in Snake fin dall'inizio, a sua insaputa.</p>
<p>Nella scena post-crediti, Revolver Ocelot si rivela un agente triplo che riferisce a un misterioso interlocutore — il Presidente degli Stati Uniti, che altri non è se non Solidus Snake, il terzo clone del progetto.</p>
</div>
<div class="codec">
<div class="codec-top"><span><span class="dot"></span>trasmissione in entrata</span><span>freq 141.12 *</span></div>
<div class="codec-portraits">
<div><div class="codec-slot"><span>MM</span></div><div class="codec-id">"MILLER"</div></div>
<div class="codec-mid"><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><div class="codec-slot"><span>SS</span></div><div class="codec-id">SNAKE</div></div>
</div>
<p class="codec-transcript"><b>"MILLER":</b> Ricorda, Snake: non giocare entro 30 minuti dai pasti. E non sputare in pubblico.</p>
</div>
</section>
<!-- PERSONAGGI -->
<section class="page" id="personaggi" data-tab="CHAR" data-title="I personaggi che contano">
<div class="page-head">
<span class="page-num">04</span>
<div><p class="page-eyebrow">Schedario · Cast principale</p><h2 class="page-title">I personaggi che contano</h2></div>
</div>
<div class="page-body">
<p style="font-size:.9rem;color:var(--ink-soft)">Colore del bordo = livello di fiducia accertato a fine missione. È, letteralmente, il tema del gioco.</p>
</div>
<div class="dossier-grid">
<div class="dcard ally"><div class="dcard-top"><div class="photo-slot"><span>SS</span></div><div><div class="dcard-file">FILE N. 001</div><div class="dcard-name">Solid Snake</div><span class="dtag">PROTAGONISTA</span></div></div><p class="dfield"><b>Chi è davvero</b>Clone di Big Boss, portatore (si crede) dei geni recessivi</p><p class="dfield"><b>Eredità / ferita</b>Trova nel duello finale il primo atto interamente scelto da lui</p></div>
<div class="dcard enemy"><div class="dcard-top"><div class="photo-slot"><span>LS</span></div><div><div class="dcard-file">FILE N. 002</div><div class="dcard-name">Liquid Snake</div><span class="dtag">NEMICO</span></div></div><p class="dfield"><b>Chi è davvero</b>Clone "gemello", comandante di FOXHOUND</p><p class="dfield"><b>Eredità / ferita</b>Costruisce la propria identità su un complesso genetico che si rivela un equivoco</p></div>
<div class="dcard double"><div class="dcard-top"><div class="photo-slot"><span>NH</span></div><div><div class="dcard-file">FILE N. 003</div><div class="dcard-name">Naomi Hunter</div><span class="dtag">DOPPIO GIOCO</span></div></div><p class="dfield"><b>Chi è davvero</b>Orfana cresciuta da Gray Fox, identità rubata alla vera Dr. Hunter</p><p class="dfield"><b>Eredità / ferita</b>Infiltrata per vendetta, comincia a vacillare</p></div>
<div class="dcard ally"><div class="dcard-top"><div class="photo-slot"><span>GF</span></div><div><div class="dcard-file">FILE N. 004</div><div class="dcard-name">Gray Fox</div><span class="dtag">ALLEATO</span></div></div><p class="dfield"><b>Chi è davvero</b>Ex alleato di MG1 e nemico di MG2, ora cyborg</p><p class="dfield"><b>Eredità / ferita</b>Muore salvando Snake, rivendicando una scelta propria</p></div>
<div class="dcard ally"><div class="dcard-top"><div class="photo-slot"><span>HE</span></div><div><div class="dcard-file">FILE N. 005</div><div class="dcard-name">Otacon</div><span class="dtag">ALLEATO</span></div></div><p class="dfield"><b>Chi è davvero</b>Ingegnere capo di Metal Gear REX</p><p class="dfield"><b>Eredità / ferita</b>Scopre di aver costruito un'arma d'attacco credendola difensiva</p></div>
<div class="dcard double"><div class="dcard-top"><div class="photo-slot"><span>RO</span></div><div><div class="dcard-file">FILE N. 006</div><div class="dcard-name">Revolver Ocelot</div><span class="dtag">DOPPIO GIOCO</span></div></div><p class="dfield"><b>Chi è davvero</b>Agente triplo al servizio del Presidente</p><p class="dfield"><b>Eredità / ferita</b>Ogni apparizione, in retrospettiva, è calcolata</p></div>
<div class="dcard shadow"><div class="dcard-top"><div class="photo-slot"><span>SO</span></div><div><div class="dcard-file">FILE N. 007</div><div class="dcard-name">Solidus Snake</div><span class="dtag">OMBRA</span></div></div><p class="dfield"><b>Chi è davvero</b>Terzo clone del progetto, entrambe le eredità genetiche</p><p class="dfield"><b>Eredità / ferita</b>Rivelato solo in una telefonata come vero burattinaio</p></div>
<div class="dcard ally"><div class="dcard-top"><div class="photo-slot"><span>RC</span></div><div><div class="dcard-file">FILE N. 008</div><div class="dcard-name">Roy Campbell</div><span class="dtag">ALLEATO</span></div></div><p class="dfield"><b>Chi è davvero</b>Comandante che richiama Snake in servizio</p><p class="dfield"><b>Eredità / ferita</b>Nasconde informazioni "per il bene della missione"</p></div>
</div>
</section>
<!-- TEMI -->
<section class="page" id="temi" data-tab="TEMI" data-title="I temi portanti">
<div class="page-head">
<span class="page-num">05</span>
<div><p class="page-eyebrow">Filo conduttore</p><h2 class="page-title">I temi portanti</h2></div>
</div>
<div class="theme-grid">
<div class="ttile"><h4>Determinismo genetico</h4><p>Il DNA sembra scrivere il destino di ognuno, finché il finale non dimostra il contrario.</p></div>
<div class="ttile"><h4>La guerra come linguaggio</h4><p>Quasi ogni personaggio si definisce solo attraverso il combattimento.</p></div>
<div class="ttile"><h4>Il corpo come proprietà altrui</h4><p>Dai soldati Genoma non consenzienti a Snake stesso, vettore inconsapevole di un'arma biologica.</p></div>
<div class="ttile"><h4>Burattinai invisibili</h4><p>Ogni vittoria di Snake si rivela, prima o poi, orchestrata da qualcun altro.</p></div>
<div class="ttile"><h4>Famiglie scelte</h4><p>Contro il sangue che tradisce, il legame tra Snake, Meryl e Otacon non deve nulla alla genetica.</p></div>
<div class="ttile"><h4>La quarta parete</h4><p>Psycho Mantis suggerisce che nemmeno chi osserva da fuori lo schermo è fuori dal sistema di controllo.</p></div>
</div>
</section>
<!-- FILO ROSSO -->
<section class="page" id="filo" data-tab="FILO" data-title="Il filo rosso attraverso i tre capitoli">
<div class="page-head">
<span class="page-num">06</span>
<div><p class="page-eyebrow">Schema ricorrente</p><h2 class="page-title">Il filo rosso attraverso i tre capitoli</h2></div>
</div>
<div class="page-body">
<div class="twrap">
<table>
<thead><tr>
<th>Elemento</th>
<th><span class="thicon"><svg><use href="#ic-crate"/></svg>MG1</span></th>
<th><span class="thicon"><svg><use href="#ic-drop"/></svg>MG2</span></th>
<th><span class="thicon"><svg><use href="#ic-haz"/></svg>MGS1</span></th>
</tr></thead>
<tbody>
<tr><td>Chi comanda davvero i nemici</td><td>Big Boss, in incognito</td><td>Big Boss, alla luce del sole</td><td>Un "Presidente" che è in realtà un terzo clone</td></tr>
<tr><td>Chi guida Snake via radio e mente</td><td>—</td><td>Nessuno (Campbell è affidabile)</td><td>"Master Miller" è Liquid sotto falso nome</td></tr>
<tr><td>Alleato/nemico con identità doppia</td><td>—</td><td>Gray Fox come Black Ninja/nemico</td><td>Gray Fox come Cyborg Ninja, ambiguo fino al riconoscimento</td></tr>
<tr><td>Rivelazione sul sangue di Snake</td><td>—</td><td>Big Boss è suo padre</td><td>Snake e Liquid sono cloni dello stesso uomo</td></tr>
<tr><td>Alleato misterioso non identificato</td><td>—</td><td>Chi lo guida nel campo minato senza svelarsi</td><td>"Deep Throat", lasciato intendere essere Gray Fox</td></tr>
<tr><td>Arma finale, punto debole</td><td>Metal Gear TX-55, gambe</td><td>Metal Gear D, gambe</td><td>Metal Gear REX, radar</td></tr>
<tr><td>Chiave a memoria di forma</td><td>—</td><td>La spilla di Gustava</td><td>Le tre card key, in realtà un'unica lega termica</td></tr>
</tbody>
</table>
</div>
<p>Ogni capitolo riprende gli stessi ingredienti — un mentore che tradisce, un doppio nascosto, un'arma nucleare bipede, un oggetto-chiave che cambia con la temperatura — e li fa esplodere con conseguenze sempre più personali. È la firma autoriale di Kojima: la serie non smette mai di specchiarsi, spesso proprio nei dettagli che sembrano solo folklore di gameplay più che nei grandi twist narrativi.</p>
</div>
</section>
<!-- IRRISOLTI -->
<section class="page" id="irrisolti" data-tab="IRRI" data-title="Chi porta avanti un filo non risolto">
<div class="page-head">
<span class="page-num">07</span>
<div><p class="page-eyebrow">Finali aperti</p><h2 class="page-title">Chi porta avanti un filo non risolto</h2></div>
</div>
<div class="page-body">
<ul class="status-list">
<li><span class="flag">IN SOSPESO</span><strong>Solid Snake</strong> — ha vinto il primo duello "per sé stesso", ma FoxDie resta nel suo corpo: un'arma a orologeria di cui non conosce i limiti.</li>
<li><span class="flag">IN SOSPESO</span><strong>Otacon</strong> — resta come possibile alleato ricorrente, con un'eredità familiare (Manhattan Project, Hiroshima) pesante quanto quella genetica di Snake.</li>
<li><span class="flag">INTERROTTO</span><strong>Naomi Hunter</strong> — la sua confessione viene interrotta prima di rivelare fino in fondo cosa ha modificato in FoxDie.</li>
<li><span class="flag">DOPPIO FONDO</span><strong>Revolver Ocelot</strong> — rivelato agente triplo solo a scena in corso; riferisce direttamente al Presidente/Solidus.</li>
<li><span class="flag">SENZA VOLTO</span><strong>Solidus Snake</strong> — introdotto solo come voce al telefono, portatore di entrambe le eredità genetiche di Big Boss.</li>
<li><span class="flag">IRRISOLTO</span><strong>Il corpo di Big Boss</strong> — l'intera crisi ruota attorno alla richiesta dei suoi resti genetici. Chi li controlli davvero resta un punto sospeso.</li>
</ul>
</div>
</section>
<!-- DOMANDE -->
<section class="page" id="domande" data-tab="DOM" data-title="Domande in sospeso">
<div class="page-head">
<span class="page-num">08</span>
<div><p class="page-eyebrow">Questioni irrisolte</p><h2 class="page-title">Domande da tenersi in tasca</h2></div>
</div>
<div class="page-body">
<ul class="qa-list">
<li><span class="q">Q.</span>Cosa ha modificato davvero Naomi in FoxDie, e con quali conseguenze future su Snake?</li>
<li><span class="q">Q.</span>Chi risponde, nell'ombra, a Ocelot — e quanto in alto arriva la catena di comando dietro Shadow Moses?</li>
<li><span class="q">Q.</span>Cosa significa che i "figli di Big Boss" erano più di due — e cosa ne è stato del resto di Les Enfants Terribles?</li>
<li><span class="q">Q.</span>Fino a che punto il Pentagono ha pianificato ogni mossa di Snake, e cosa succede quando uno strumento smette di comportarsi come tale?</li>
<li><span class="q">Q.</span>Che ruolo giocherà un'identità presa in prestito — nome, volto, persino sangue — ora che il gioco ha dimostrato quanto sia facile impersonare qualcun altro?</li>
</ul>
</div>
</section>
<!-- PATTERN -->
<section class="page" id="pattern" data-tab="PAT" data-title="Pattern d'autore da riconoscere">
<div class="page-head">
<span class="page-num">09</span>
<div><p class="page-eyebrow">Strumenti ricorrenti</p><h2 class="page-title">Pattern d'autore da riconoscere</h2></div>
</div>
<div class="page-body">
<p>Più che memorizzare eventi, conviene entrare nel prossimo capitolo allenati a riconoscere gli strumenti che Kojima usa sistematicamente:</p>
<ul class="chain">
<li><strong>Un mentore radio che non è chi dice di essere.</strong> Già successo due volte: diffidare per principio di ogni voce familiare via codec.</li>
<li><strong>Un alleato in maschera</strong> che va riconosciuto dalla voce o dallo stile, non dall'aspetto — come Gray Fox in entrambi i capitoli in cui appare mascherato.</li>
<li><strong>Un oggetto quotidiano</strong> che si scopre essere la chiave di tutto: lo scatolone, la spilla, le card key.</li>
<li><strong>Un momento di rottura della quarta parete</strong> che ridefinisce il rapporto gioco-giocatore.</li>
<li><strong>Una rivelazione finale</strong> che ribalta retroattivamente tutto ciò che l'ha preceduta, spesso in una scena post-crediti.</li>
</ul>
</div>
<aside class="intel-note r3">
<svg class="intel-pin" width="20" height="20"><use href="#ic-pin"/></svg>
<span class="intel-label">Kojima conferma: la vera innovazione non è lo stealth</span>
«La più grande innovazione di Metal Gear, perfezionata qui, è il radio-transceiver interattivo. Racconta la storia in parallelo all'azione: il giocatore non si sente mai distaccato dal dramma perché tutto accade "in diretta".»
</aside>
</section>
<!-- GLOSSARIO -->
<section class="page" id="glossario" data-tab="GLOSS" data-title="Piccolo glossario">
<div class="page-head">
<span class="page-num">10</span>
<div><p class="page-eyebrow">Termini chiave</p><h2 class="page-title">Piccolo glossario per non perdersi</h2></div>
</div>
<div class="page-body">
<div class="refgrid">
<div class="refcard"><b>FOXHOUND</b> — unità speciale d'élite a cui appartengono sia Snake che i suoi principali antagonisti.</div>
<div class="refcard"><b>Les Enfants Terribles</b> — il progetto di clonazione del 1972 da cui nascono Solid, Liquid e un terzo soggetto.</div>
<div class="refcard"><b>FoxDie</b> — virus a bersaglio genetico impiantato in Snake, capace di uccidere selettivamente in base al profilo DNA.</div>
<div class="refcard"><b>Soldati Genoma</b> — truppe geneticamente potenziate per il combattimento, senza pieno consenso.</div>
<div class="refcard"><b>Codec</b> — il sistema radio che la serie usa per raccontare la storia "in diretta"; per Kojima è la vera innovazione della saga.</div>
</div>
</div>
</section>
<!-- SINTESI -->
<section class="page" id="sintesi" data-tab="SINTESI" data-title="In sintesi">
<div class="page-head">
<span class="page-num">11</span>
<div><p class="page-eyebrow">Conclusione</p><h2 class="page-title">In sintesi</h2></div>
</div>
<div class="page-body">
<p><em>Metal Gear</em> racconta un soldato tradito dal proprio comandante. <em>Metal Gear 2</em> lo trasforma in un figlio tradito dal proprio padre. <em>Metal Gear Solid</em> lo trasforma in un uomo che scopre di non essere nemmeno unico. Il filo che lega davvero i tre capitoli non è l'arma bipede che torna ogni volta, ma la domanda che si allarga a ogni giro: <strong>quanto di quello che chiami "te stesso" è stato deciso da qualcun altro prima che tu nascessi?</strong></p>
</div>
<div class="codec">
<div class="codec-top"><span><span class="dot"></span>trasmissione in uscita</span><span>freq 140.85</span></div>
<div class="codec-portraits">
<div><div class="codec-slot"><span>SS</span></div><div class="codec-id">SNAKE</div></div>
<div class="codec-mid"><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div><div class="codec-slot"><span>RC</span></div><div class="codec-id">CAMPBELL</div></div>
</div>
<p class="codec-transcript"><b>SNAKE:</b> I miei incubi sono finiti, colonnello. Adesso sono un uomo libero.</p>
</div>
<div class="next-file">
<svg><use href="#ic-lock"/></svg>
<div><p class="nf-title">PROSSIMO FASCICOLO — STATO: CLASSIFICATO</p><span class="nf-name">nome in codice omissato</span></div>
</div>
</section>
<footer class="caseclosed">
<div class="bigstamp">FASCICOLO CHIUSO</div>
<p>Buona lettura — e buona infiltrazione, quando sarà il momento.</p>
</footer>
</main>
<button id="top-btn" aria-label="Torna all'inizio del fascicolo">↑</button>
<script>
// tabs
const tabsNav = document.getElementById('tabs');
const readout = document.getElementById('readout');
const sections = Array.from(document.querySelectorAll('[data-tab]'));
sections.forEach(sec=>{
const btn = document.createElement('button');
btn.className='tab'; btn.textContent=sec.dataset.tab; btn.title=sec.dataset.title; btn.setAttribute('aria-label',sec.dataset.title);
btn.addEventListener('click',()=>sec.scrollIntoView({behavior:'smooth',block:'start'}));
tabsNav.appendChild(btn);
});
const tabButtons = Array.from(tabsNav.querySelectorAll('.tab'));
const revealObs = new IntersectionObserver(entries=>{
entries.forEach(e=>{ if(e.isIntersecting) e.target.classList.add('in-view'); });
},{threshold:.12});
sections.forEach(s=>revealObs.observe(s));
document.querySelectorAll('.codec').forEach(c=>revealObs.observe(c));
const activeObs = new IntersectionObserver(entries=>{
entries.forEach(e=>{
if(e.isIntersecting){
const idx = sections.indexOf(e.target);
tabButtons.forEach(b=>b.classList.remove('active'));
if(tabButtons[idx]) tabButtons[idx].classList.add('active');
readout.textContent = '// posizione: ' + e.target.dataset.title;
}
});
},{threshold:0, rootMargin:'-45% 0px -50% 0px'});
sections.forEach(s=>activeObs.observe(s));
// progress + top button
const progress = document.getElementById('progress');
const topBtn = document.getElementById('top-btn');
window.addEventListener('scroll',()=>{
const h = document.documentElement;
const scrolled = h.scrollTop/(h.scrollHeight-h.clientHeight)*100;
progress.style.width = scrolled+'%';
topBtn.classList.toggle('show', h.scrollTop>600);
},{passive:true});
topBtn.addEventListener('click',()=>window.scrollTo({top:0,behavior:'smooth'}));
// redact buttons
document.querySelectorAll('.redact').forEach(btn=>{
const hint = btn.querySelector('.rhint');
const closedHTML = hint.innerHTML;
btn.addEventListener('click',()=>{
const open = btn.getAttribute('aria-expanded')==='true';
btn.setAttribute('aria-expanded', String(!open));
hint.innerHTML = !open ? 'declassificato' : closedHTML;
});
});
// boot line typewriter (decorative only)
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const bootEl = document.getElementById('bootline');
const bootText = '> accesso concesso · biometria confermata · fascicolo sbloccato';
if(bootEl){
if(reduced){ bootEl.textContent = bootText; }
else{
let i=0;
const cursor = bootEl.querySelector('.cursor');
function typeBoot(){
if(i<=bootText.length){
bootEl.childNodes[0].nodeType===3 && bootEl.childNodes[0].remove();
bootEl.insertBefore(document.createTextNode(bootText.slice(0,i)), cursor);
i++;
setTimeout(typeBoot, 18);
}
}
setTimeout(typeBoot, 500);
}
}
</script>
</body>
</html>Game Source: Da Outer Heaven a Shadow Moses — Fascicolo Operativo
Creator: PrismRider28
Libraries: none
Complexity: complex (664 lines, 51.6 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: da-outer-heaven-a-shadow-moses-fascicolo-prismrider28" to link back to the original. Then publish at arcadelab.ai/publish.