:root{
  --ink:#090706;
  --paper:#f2d5b0;
  --cream:#ffe4c2;
  --lava:#ff4a0b;
  --lava2:#ff8a16;
  --blue:#41a9ff;
  --blue2:#bdeaff;
  --brown:#442a28;
  --muted:#d8bca1;
  --line:rgba(255,229,198,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:#0b0705;color:#fff;font-family:"Trebuchet MS",Arial,sans-serif;overflow-x:hidden;min-width:1180px}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--lava);color:#fff}
#sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30;mix-blend-mode:screen;opacity:.58}
.cursor-glow{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(255,91,18,.16),transparent 68%);transform:translate(-50%,-50%);transition:opacity .25s ease}

.topbar{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(1760px,calc(100vw - 72px));height:68px;border:2px solid rgba(255,229,198,.24);background:rgba(10,7,5,.72);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 18px;z-index:100;border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.28)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.brand img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,96,20,.4))}
.navlinks{display:flex;gap:26px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#e5cdb4}
.navlinks a{position:relative;padding:10px 0}
.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--lava);transition:right .2s ease}
.navlinks a:hover:after{right:0}
.top-actions{display:flex;gap:8px}
.mini-btn{padding:11px 14px;border:1px solid rgba(255,255,255,.22);border-radius:10px;font-size:12px;font-weight:900;letter-spacing:.08em;transition:.2s ease;background:rgba(255,255,255,.04)}
.mini-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
.mini-btn.hot{background:var(--lava);color:#150805;border-color:#ff7b42;box-shadow:0 0 24px rgba(255,75,11,.25)}

.hero{position:relative;height:1080px;min-height:900px;overflow:hidden;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;padding:145px 7vw 90px;isolation:isolate}
.hero-bg{position:absolute;inset:-6%;z-index:-5;background-image:linear-gradient(90deg,rgba(7,5,4,.35),rgba(7,5,4,.18)),url('../assets/images/background.jpg');background-size:cover;background-position:center;filter:saturate(1.15) contrast(1.04) brightness(.72);transform:scale(1.08)}
.hero-vignette{position:absolute;inset:0;z-index:-4;background:radial-gradient(circle at 66% 46%,transparent 0 24%,rgba(4,3,2,.4) 61%,rgba(4,3,2,.92) 100%),linear-gradient(180deg,rgba(5,4,3,.2),rgba(5,4,3,.7))}
.hero-grid{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to right,black,transparent 74%);opacity:.35}
.hero-copy{position:relative;z-index:4;max-width:760px;padding-left:2vw}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:10px;font-family:"Courier New",monospace;font-size:13px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:#ffd5b0}
.eyebrow:before,.section-kicker:before{content:"";width:42px;height:2px;background:var(--lava);box-shadow:0 0 10px var(--lava)}
.hero h1{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(108px,8.2vw,164px);line-height:.78;letter-spacing:-.035em;margin:24px 0 26px;text-transform:uppercase;color:#ffe4c2;text-shadow:6px 6px 0 #150807,10px 10px 0 rgba(255,74,11,.46)}
.hero h1 span{color:#fff1dc;-webkit-text-stroke:2px #140807}
.hero-tagline{max-width:610px;font-size:22px;line-height:1.45;color:#f2d6bc;margin:0 0 25px}
.ticker-row{display:flex;align-items:center;gap:12px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#cdb8a4;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);padding:12px 0;max-width:640px}
.ticker-row strong{font-size:20px;color:#fff}
.ticker-label{font:900 11px/1 "Courier New",monospace;color:#ffb07d}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--lava);box-shadow:0 0 14px var(--lava);margin-left:6px}
.hero-buttons,.final-actions{display:flex;gap:12px;margin-top:25px}
.comic-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:186px;height:58px;padding:0 24px;border:2px solid #0b0705;border-radius:7px;font-family:"Arial Black",Impact,sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;box-shadow:5px 5px 0 #0a0605;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;overflow:hidden}
.comic-btn span{position:relative;z-index:2}
.comic-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.3) 48%,transparent 70%);transform:translateX(-140%);transition:transform .45s ease}
.comic-btn:hover:before{transform:translateX(140%)}
.comic-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #0a0605}
.comic-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #0a0605}
.comic-btn.primary{background:linear-gradient(#ff7d30,#ff4a0b);color:#150806}
.comic-btn.ghost{background:#f3d7b7;color:#160b08}
.ca-card{display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(14,9,7,.72);border:2px solid rgba(255,215,178,.24);border-radius:14px;padding:16px 16px 16px 20px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.ca-card.compact{margin-top:22px;max-width:700px}
.ca-kicker{display:block;font:900 10px/1.2 "Courier New",monospace;letter-spacing:.13em;color:#ffb17c;margin-bottom:7px}
.ca-card code{display:block;max-width:470px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffe8d1;font-size:13px}
.copy-btn{border:2px solid #100907;background:#ffe1bd;color:#170a06;border-radius:8px;height:44px;padding:0 16px;font-weight:1000;font-size:12px;letter-spacing:.09em;cursor:pointer;box-shadow:3px 3px 0 #ff4a0b;transition:.16s ease;white-space:nowrap}
.copy-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #ff4a0b}
.copy-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #ff4a0b}

.hero-character{position:relative;z-index:3;width:min(830px,44vw);justify-self:end;align-self:end;margin-right:1vw;transform-origin:bottom center;filter:drop-shadow(0 36px 44px rgba(0,0,0,.42))}
.hero-character img{position:relative;display:block;width:100%;height:auto;z-index:3;animation:idleFloat 6s ease-in-out infinite}
.character-halo{position:absolute;left:17%;right:5%;top:7%;bottom:18%;border-radius:48%;background:radial-gradient(circle at 58% 40%,rgba(255,197,139,.25),rgba(255,77,10,.12) 40%,transparent 68%);filter:blur(20px);z-index:1;animation:haloPulse 3.5s ease-in-out infinite}
.saber-beam{position:absolute;width:18px;height:540px;right:5%;top:35%;background:linear-gradient(90deg,#dff7ff,#63bdff 35%,#fff 50%,#63bdff 65%,#dff7ff);border-radius:999px;box-shadow:0 0 10px #c9f1ff,0 0 24px #58baff,0 0 60px #1389ff;transform:rotate(18deg);z-index:2;opacity:.92;animation:saberBuzz 1.5s ease-in-out infinite alternate}
.saber-beam:after{content:"";position:absolute;bottom:-86px;left:-5px;width:28px;height:94px;border-radius:8px;background:linear-gradient(90deg,#282828,#919191 40%,#242424 80%);border:3px solid #0c0c0c;box-shadow:inset 0 0 0 3px #454545}
.pupil{position:absolute;z-index:5;width:31px;height:31px;border-radius:50%;background:#080706;box-shadow:0 0 0 2px rgba(0,0,0,.5);pointer-events:none;transition:transform .08s linear}
.pupil-left{left:49.4%;top:37.9%}
.pupil-right{left:79.1%;top:37.9%}
.speech-bubble{position:absolute;z-index:6;right:1%;top:9%;background:#f8e2c4;color:#140908;border:4px solid #120909;border-radius:50% 48% 46% 52% / 50% 48% 52% 46%;padding:24px 28px;font-family:"Arial Black",Impact,sans-serif;font-size:12px;line-height:1.35;text-align:center;transform:rotate(5deg);box-shadow:7px 7px 0 rgba(255,74,11,.72);animation:bubbleWobble 4s ease-in-out infinite}
.speech-bubble:after{content:"";position:absolute;left:23px;bottom:-28px;width:34px;height:34px;background:#f8e2c4;border-right:4px solid #120909;border-bottom:4px solid #120909;transform:rotate(28deg) skew(8deg)}
.speech-bubble strong{font-size:15px;color:#ff4a0b}
.scroll-note{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;font:900 11px/1 "Courier New",monospace;letter-spacing:.15em;color:#ffe1c4}.scroll-note span{display:inline-block;margin-left:8px;animation:bounce 1.3s infinite}

.marquee{overflow:hidden;background:#f3d4af;color:#120806;border-top:4px solid #120806;border-bottom:4px solid #120806;transform:rotate(-1deg) scale(1.02);position:relative;z-index:20}
.marquee-track{display:flex;width:max-content;align-items:center;gap:28px;padding:14px 0;font-family:Impact,"Arial Black",sans-serif;font-size:26px;letter-spacing:.05em;animation:marquee 24s linear infinite}
.marquee-track i{font-style:normal;color:var(--lava)}

.section{position:relative;min-height:940px;padding:120px 8vw;overflow:hidden}
.section-number{position:absolute;right:4vw;top:54px;font-family:Impact,sans-serif;font-size:170px;color:rgba(255,255,255,.03);-webkit-text-stroke:1px rgba(255,255,255,.08)}
.incident{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center;background:radial-gradient(circle at 20% 50%,rgba(255,74,11,.13),transparent 36%),#0b0705}
.poster-frame{position:relative;max-width:620px;padding:16px;background:#edc9a3;border:4px solid #150a07;box-shadow:16px 18px 0 #ff4a0b,30px 32px 0 rgba(255,74,11,.12);transform:rotate(-2.8deg)}
.poster-frame img{display:block;width:100%;filter:saturate(.92) contrast(1.07)}
.poster-frame:after{content:"";position:absolute;inset:16px;border:2px dashed rgba(35,15,10,.35);pointer-events:none}
.poster-stamp{position:absolute;right:-32px;bottom:34px;background:#14100e;color:#ffd1a8;border:3px solid #ff5a18;padding:14px 18px;font:900 12px/1.15 "Courier New",monospace;letter-spacing:.09em;text-align:center;transform:rotate(8deg);box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.incident-copy{max-width:760px}
.incident h2,.rules h2,.archive h2,.finale h2{font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-.018em;line-height:.96;margin:22px 0;color:#ffe0be}
.incident h2{font-size:clamp(62px,5.2vw,104px)}
.incident-copy>p{font-size:20px;line-height:1.6;color:#d9c2ad;max-width:680px}
.quote-card{margin-top:36px;border-left:5px solid var(--lava);padding:4px 0 4px 22px}
.quote-card span{font:900 11px/1 "Courier New",monospace;letter-spacing:.12em;color:#ff9a67}
.quote-card blockquote{font-size:27px;line-height:1.3;font-weight:900;margin:10px 0;color:#fff1df}

.rules{background:linear-gradient(180deg,#f0d1aa 0%,#e5bb8f 100%);color:#140a07;min-height:990px}
.rules:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(30,12,8,.08) 1px,transparent 1px);background-size:16px 16px;opacity:.5}
.rules-title{position:relative;text-align:center;max-width:900px;margin:0 auto 55px}
.rules .section-kicker{color:#582416}.rules .section-kicker:before{background:#f14b15}
.rules h2{font-size:92px;color:#1a0d09;text-shadow:5px 5px 0 rgba(255,74,11,.3)}
.rule-stack{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1580px;margin:0 auto}
.rule-card{position:relative;min-height:430px;padding:34px;background:#f7dfbf;border:4px solid #170b08;border-radius:12px;box-shadow:12px 14px 0 #170b08;transform:rotate(-1.4deg);transition:transform .18s ease;overflow:hidden}
.rule-card:nth-child(2){transform:rotate(1.5deg) translateY(18px)}
.rule-card:nth-child(3){transform:rotate(-.7deg) translateY(-8px)}
.rule-card.dark{background:#1b1310;color:#f8dfc1;box-shadow:12px 14px 0 #f45a1d}
.rule-no{font:900 12px/1 "Courier New",monospace;letter-spacing:.13em;color:#bb4a20}
.rule-card h3{font-family:Impact,"Arial Black",sans-serif;font-size:64px;line-height:.9;margin:48px 0 20px}
.rule-card p{font-size:19px;line-height:1.52;max-width:390px}
.scribble{position:absolute;right:22px;bottom:28px;font-family:"Comic Sans MS",cursive;font-size:24px;font-weight:900;color:#df4c19;transform:rotate(-8deg)}
.mini-saber{position:absolute;right:-60px;bottom:60px;width:280px;height:13px;border-radius:999px;background:#fff;box-shadow:0 0 12px #74c5ff,0 0 28px #1d99ff;transform:rotate(-30deg)}
.mini-saber:before{content:"";position:absolute;left:-65px;top:-7px;width:74px;height:27px;border:3px solid #050505;border-radius:5px;background:linear-gradient(#a0a0a0,#333)}
.lava-meter{position:absolute;left:34px;right:34px;bottom:42px;height:24px;border:3px solid #170b08;border-radius:999px;padding:3px;background:#d9b88f;overflow:hidden}
.lava-meter span{display:block;height:100%;width:92%;border-radius:999px;background:linear-gradient(90deg,#ff8b18,#ff3800);box-shadow:inset 0 0 12px rgba(255,255,255,.4);animation:meterPulse 2s ease-in-out infinite}

.archive{background:#100906;min-height:930px;padding-left:0;padding-right:0}
.archive-head{max-width:1100px;margin:0 auto 42px;padding:0 7vw;text-align:center}
.archive h2{font-size:94px;margin-bottom:15px}
.archive-head p{font-size:18px;color:#d6bca3;margin:0 auto;max-width:760px}
.archive-strip{position:relative;width:100%;height:500px;border-top:5px solid #0b0605;border-bottom:5px solid #0b0605;box-shadow:0 0 0 2px rgba(255,108,33,.25),0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.archive-strip img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.5s cubic-bezier(.2,.8,.2,1),filter .4s ease;filter:saturate(.95) brightness(.86)}
.archive-strip:hover img{transform:scale(1.06);filter:saturate(1.08) brightness(.95)}
.scanline{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),linear-gradient(90deg,rgba(0,0,0,.38),transparent 20% 80%,rgba(0,0,0,.38));pointer-events:none}
.archive-notes{display:flex;justify-content:space-between;gap:30px;max-width:1500px;margin:26px auto 0;padding:0 5vw;font:900 11px/1.2 "Courier New",monospace;letter-spacing:.1em;color:#d4a783;text-transform:uppercase}

.finale{min-height:1040px;display:flex;align-items:center;background:#0b0705;isolation:isolate}
.finale-bg{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(8,5,4,.96) 0 43%,rgba(8,5,4,.5) 68%,rgba(8,5,4,.78)),url('../assets/images/source-character.png') right center/cover no-repeat;filter:saturate(.8) contrast(1.1)}
.finale-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 62%,rgba(255,68,8,.22),transparent 36%)}
.finale-content{position:relative;z-index:4;max-width:860px}
.finale-mark{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:#f2d3ad;color:#150806;border:4px solid #140807;box-shadow:6px 6px 0 #ff4a0b;font:70px/.9 Impact,sans-serif;transform:rotate(-8deg);margin-bottom:28px}
.finale h2{font-size:104px;margin-bottom:14px}
.finale-content>p{font-size:20px;color:#d5baa3;margin-bottom:28px}
.final-ca{width:min(820px,100%);margin-top:28px}
.final-ca code{max-width:590px}
.finale-character{position:absolute;right:1.5vw;bottom:-120px;width:650px;opacity:.88;filter:drop-shadow(0 0 50px rgba(255,64,4,.25));z-index:1}
.finale-character img{width:100%;transform:rotate(3deg)}

footer{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:#f0cfaa;color:#130907;border-top:4px solid #130907;font:900 11px/1 "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:38px;transform:translate(-50%,30px);padding:14px 20px;border:3px solid #110907;background:#f6dab8;color:#130907;font:900 12px/1 "Courier New",monospace;letter-spacing:.11em;z-index:200;opacity:0;pointer-events:none;box-shadow:6px 6px 0 #ff4a0b;transition:.22s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in-view{opacity:1;transform:translateY(0)}
.hero .reveal{transition-delay:.15s}

@keyframes idleFloat{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-14px) rotate(.35deg)}}
@keyframes haloPulse{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}}
@keyframes saberBuzz{from{filter:brightness(.88)}to{filter:brightness(1.25)}}
@keyframes bubbleWobble{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(2deg) translateY(-8px)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes meterPulse{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.25)}}

@media (max-width:1400px){
  .hero{padding-left:5vw;padding-right:5vw}.hero h1{font-size:110px}.hero-character{width:700px}.speech-bubble{right:-3%;top:7%}.navlinks{gap:16px}.section{padding-left:6vw;padding-right:6vw}.incident{gap:5vw}.rules h2,.archive h2{font-size:78px}.finale h2{font-size:86px}.finale-character{width:560px;right:-4vw}.rule-card h3{font-size:54px}
}
.hero-character.parallax{translate:var(--mx,0) var(--my,0);transition:translate .12s linear,opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}