@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Special+Elite&family=Share+Tech+Mono&display=swap');

:root{
  --black:#050505;--red:#b40000;--bright:#ff1a1a;--paper:#d8d3c8;--steel:#7d7d7d;--white:#f3f0e8;
}
*{box-sizing:border-box}
html{background:#000}
body{margin:0;color:var(--white);font-family:"Share Tech Mono",monospace;background:
radial-gradient(circle at 30% 10%,#2b0000 0,transparent 32%),
linear-gradient(140deg,#030303,#120000 42%,#020202 75%);min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background:
repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px);mix-blend-mode:screen;z-index:50}
#noise{position:fixed;inset:-30%;pointer-events:none;z-index:49;opacity:.08;background-image:url("noise.svg");animation:noise .22s steps(2) infinite}
@keyframes noise{0%{transform:translate(0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(1%,-3%)}100%{transform:translate(0)}}
#flash{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:0;background:#fff}
.flash{animation:flash .16s linear 2}
@keyframes flash{50%{opacity:.9}}
a{color:inherit}
.topbar{display:flex;justify-content:space-between;gap:20px;padding:15px 4vw;border-bottom:3px solid #8b0000;background:#030303;position:sticky;top:0;z-index:90;box-shadow:0 8px 30px #000}
.topbar .tiny{font-size:11px;color:#a6a6a6;letter-spacing:2px}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{font-family:"Black Ops One";font-size:13px;text-decoration:none;border:1px solid #555;padding:7px 10px;background:#111}
nav a:hover,nav a.active{background:#b40000;border-color:#f33;transform:rotate(-1deg)}
.cover{max-width:1250px;margin:auto;padding:7vh 4vw 5vh}
.hero{min-height:62vh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:60px 0}
.hero:after{content:"";position:absolute;right:-4vw;top:5%;width:42%;height:90%;background:url("bomb.svg") center/contain no-repeat;filter:drop-shadow(0 0 25px #800);opacity:.68;z-index:0}
.hero>*{position:relative;z-index:2}
.catalog,.eyebrow{letter-spacing:4px;color:#999;font-size:12px}
h1{font-family:"Black Ops One",Impact,sans-serif;margin:0;text-transform:uppercase}
.hero h1{font-size:clamp(58px,11vw,155px);line-height:.78;letter-spacing:-5px;text-shadow:5px 5px 0 #550000,9px 9px 0 #000;position:relative;max-width:900px}
.hero h1:before,.hero h1:after{content:attr(data-text);position:absolute;left:0;top:0;clip-path:inset(0 0 55% 0)}
.hero h1:before{color:#f00;transform:translate(3px,-2px);z-index:-1}
.hero h1:after{color:#777;transform:translate(-3px,2px);z-index:-2;clip-path:inset(52% 0 0 0)}
.subtitle{font-family:"Special Elite";font-size:clamp(24px,5vw,62px);color:#d20000;transform:rotate(-2deg);display:inline-block;margin-top:20px}
.manifesto{max-width:700px;background:#ddd;color:#050505;padding:8px 12px;font-weight:bold;transform:rotate(.6deg)}
.sticker{position:absolute;right:4%;bottom:10%;background:#ddd;color:#000;border:4px solid #000;outline:2px solid #ddd;padding:8px 10px;text-align:center;font-family:Arial Black,sans-serif;line-height:.8;transform:rotate(4deg);z-index:4!important;box-shadow:8px 8px 0 #600}
.sticker span{font-size:10px}
.bigbutton,.linkbutton,.buttons button,.play,.evidencecard{border:2px solid #e11;background:#111;color:#fff;padding:13px 17px;font:inherit;font-weight:bold;cursor:pointer;box-shadow:5px 5px 0 #500;text-decoration:none;display:inline-block}
.bigbutton{align-self:flex-start;margin-top:15px;font-family:"Black Ops One";font-size:20px}
.bigbutton:hover,.linkbutton:hover,.buttons button:hover,.play:hover,.evidencecard:hover{background:#b40000;transform:translate(2px,2px);box-shadow:2px 2px 0 #500}
.warning{color:#999;font-size:12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.panel,.crewcard{position:relative;background:linear-gradient(135deg,rgba(24,24,24,.97),rgba(5,5,5,.98));border:1px solid #444;padding:24px;box-shadow:8px 9px 0 rgba(90,0,0,.5);overflow:hidden}
.panel:after,.crewcard:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.035) 42%,transparent 45%)}
.panel h2,.crewcard h2{font-family:"Black Ops One";margin-top:0;letter-spacing:1px}
.wanted{background:var(--paper);color:#111;transform:rotate(.5deg)}
.stamp{display:inline-block;border:4px solid #8b0000;color:#8b0000;font:bold 30px "Black Ops One";padding:3px 12px;transform:rotate(-9deg)}
.mug{height:180px;display:grid;place-items:center;background:repeating-linear-gradient(#aaa 0 1px,#d0cbc0 1px 25px);border:2px solid #111;margin:15px 0}
.speaker{width:120px;height:150px;background:#111;border:6px solid #333;position:relative;box-shadow:8px 8px 0 #777}
.speaker i,.speaker b{position:absolute;border-radius:50%;left:50%;transform:translateX(-50%);background:radial-gradient(circle,#111 0 20%,#555 21% 36%,#111 37% 60%,#444 61% 70%,#111 71%)}
.speaker i{width:52px;height:52px;top:12px}.speaker b{width:78px;height:78px;bottom:8px}
.buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.meter{height:20px;border:1px solid #777;margin:18px 0;background:#080808}.meter span{display:block;height:100%;width:12%;background:repeating-linear-gradient(90deg,#900 0 8px,#f00 8px 14px,#000 14px 18px);transition:.1s}
.quote{display:grid;place-items:center;text-align:center;background:#790000}
.quote p{font:34px "Black Ops One";transform:rotate(-2deg);text-shadow:4px 4px 0 #000}
footer{display:flex;justify-content:space-between;gap:15px;padding:22px 4vw;border-top:1px solid #440000;color:#777;font-size:11px;letter-spacing:1px;background:#030303}
.page{max-width:1100px;margin:auto;padding:55px 4vw 80px}
.pagehead{display:flex;justify-content:space-between;align-items:end;border-bottom:6px solid #900;padding-bottom:17px;margin-bottom:30px}
.pagehead h1{font-size:clamp(42px,8vw,90px);line-height:.85}
.barcode{font-size:24px;letter-spacing:2px;transform:rotate(90deg);transform-origin:center;color:#999}
.classified{border:4px solid #a00;color:#d22;padding:7px 15px;font:bold 22px "Black Ops One";transform:rotate(5deg)}
.tracklist{border-top:1px solid #777;margin-bottom:30px}
.track{display:grid;grid-template-columns:55px 1fr auto auto;gap:14px;align-items:center;padding:16px 8px;border-bottom:1px solid #444}
.track:hover{background:#1a0000}
.track>b{font-size:24px;color:#900}.track strong{display:block;font-size:18px}.track small{color:#888}
.track>a{padding:11px;border:1px solid #555;text-decoration:none}
.playerbox audio{width:100%;filter:grayscale(1) invert(.88)}
.playerline{display:flex;gap:10px;margin-bottom:12px}.playerline span{color:#888}
.columns{columns:2;column-gap:35px}
.crewgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:28px}
.crewcard{min-height:300px}
.silhouette{height:135px;background:linear-gradient(135deg,#090909,#250000);border:1px solid #500;display:grid;place-items:center;font:64px "Black Ops One";color:#6e0000;text-shadow:0 0 22px #f00;margin-bottom:20px}
.terminal{font-size:14px;background:#030303;box-shadow:0 0 35px rgba(180,0,0,.18),8px 9px 0 rgba(90,0,0,.5)}
.terminaltop{background:#790000;padding:8px;margin:-24px -24px 20px}
#terminalOutput{min-height:220px;color:#c9c9c9}
#terminalOutput .bad{color:#f33}
#terminalForm{display:flex;gap:8px;border-top:1px solid #333;padding-top:12px}
#terminalInput{flex:1;background:#000;color:#fff;border:0;outline:0;font:inherit}
.evidence{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0}
.evidencecard{min-height:120px;display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.evidencecard b{font-size:25px;color:#c00}.evidencecard span{font-size:11px}
.hidden{display:none!important}
.shake{animation:shake .25s linear 3}
@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-8px,4px) rotate(-1deg)}50%{transform:translate(7px,-4px) rotate(1deg)}75%{transform:translate(-3px,-6px)}}
.invert{filter:invert(1) hue-rotate(160deg)}
code{background:#000;padding:2px 5px;color:#f44}
@media(max-width:760px){
  .grid,.crewgrid{grid-template-columns:1fr}
  .evidence{grid-template-columns:1fr 1fr}
  .hero:after{width:80%;opacity:.25}
  .sticker{right:2%;bottom:4%}
  .topbar{position:relative;flex-direction:column}
  .track{grid-template-columns:42px 1fr;}.track .play,.track>a{grid-row:2}
  .columns{columns:1}
  .pagehead{align-items:center}.classified,.barcode{display:none}
}