@font-face{font-family:Px;src:url(assets/f/PressStart2P-Regular.ttf)}
:root{--red:#e8111b;--gold:#ffc83a;--gold2:#b8862b;--bone:#e9e6df;--ink:#0a0604;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:auto}
html{overflow-x:clip}
body{background:#050505;color:var(--bone);font:19px/1.6 var(--serif);overflow-x:clip;cursor:crosshair}
a,button{cursor:pointer}
::selection{background:var(--red);color:#fff}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:radial-gradient(ellipse at center,transparent 62%,#000a 100%)}
#rain{position:fixed;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}
img{display:block}
.px{font-family:Px,monospace;letter-spacing:.05em;line-height:1.8}
.latin{font:italic 13px var(--serif);letter-spacing:.45em;color:var(--gold2);text-transform:uppercase}
/* game title, copied from the game's menu */
.gt{font:900 clamp(52px,12vw,170px)/.92 var(--serif);letter-spacing:.1em;background:linear-gradient(#fff3c4,#ffc83a 45%,#8a5a12);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px #ffb42859) drop-shadow(4px 0 0 #ff000040);text-transform:uppercase}
.gt em{font-style:normal;background:linear-gradient(#ff5a5a,#c4111a 60%,#5a0509);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;mix-blend-mode:normal}
nav .brand{display:flex;align-items:center;gap:10px;font:900 15px var(--serif);letter-spacing:.2em;color:var(--gold);text-decoration:none}
nav .brand img{width:34px;height:34px}
nav .links{display:flex;gap:22px;background:#000a;padding:10px 18px;border:1px solid #ffc83a44}
nav .links a{font:9px Px;color:var(--bone);text-decoration:none}nav .links a:hover{color:var(--red)}
.lang{font:9px Px;background:var(--red);color:#fff;border:3px solid #000;padding:9px 10px;box-shadow:0 4px #000}
.lang:active{transform:translateY(4px);box-shadow:none}
.btn{display:inline-block;font:12px/1 Px;padding:20px 26px;background:var(--gold);color:var(--ink);text-decoration:none;border:4px solid #000;box-shadow:0 8px #000;transition:transform .08s steps(2),box-shadow .08s steps(2);text-transform:uppercase}
.btn:hover{transform:translateY(8px);box-shadow:0 0 #000}
.btn.r{background:var(--red);color:#fff}
/* ACT I */
.pin{position:relative;height:100vh;height:100svh;overflow:hidden}
#hero{position:relative;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;overflow:hidden}
#hero .bg{position:absolute;inset:0;background:url(assets/img/rue.jpg) center/cover;filter:grayscale(1) brightness(.35) contrast(1.3)}
#hero>*:not(.bg){position:relative;z-index:3}
#hero .logo{width:96px;height:96px;filter:drop-shadow(0 0 20px #e8111b88)}
.tag{font:italic 20px var(--serif);color:var(--bone);letter-spacing:.08em}
.stamp{font:900 clamp(30px,5vw,64px) var(--serif);color:var(--red);border:6px solid var(--red);padding:2px 22px;transform:rotate(-4deg);letter-spacing:.12em;margin-top:18px;text-shadow:0 0 18px #e8111b66}
.cue{position:absolute!important;bottom:26px;font:9px Px;color:var(--bone);opacity:.7}
#night{background:#000}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;opacity:0}
.slide .shot{position:absolute;inset:0;opacity:.6}
.slide .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 5%,#0000 80%)}
.shot img{width:100%;height:100%;object-fit:cover}
.slide>*:not(.shot){position:relative;z-index:3}
.slide .time{font:900 clamp(80px,19vw,280px)/.9 var(--serif);color:var(--red);letter-spacing:.04em;text-shadow:0 0 60px #e8111b66;mix-blend-mode:screen}
.slide h3{font:900 clamp(34px,6vw,88px)/1 var(--serif);text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:6px 0 14px}
.slide p{max-width:620px;font-size:clamp(18px,2vw,25px);color:var(--bone)}
.meter{position:absolute;z-index:5;left:8vw;right:8vw;bottom:34px;display:flex;align-items:center;gap:16px;font:10px Px;color:var(--red)}
.meter i{flex:1;height:14px;border:3px solid var(--red);position:relative}.meter b{position:absolute;inset:0;width:0;background:repeating-linear-gradient(90deg,var(--red) 0 10px,#7a0509 10px 12px)}
#foot{background:#000;padding:16vh 6vw;text-align:center;position:relative;z-index:3}
.rec{display:inline-flex;align-items:center;gap:10px;font:11px Px;color:var(--red);margin-bottom:18px}
.rec::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--red);animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.tv{max-width:1000px;margin:0 auto;padding:18px;background:#111;border:6px solid #222;border-radius:30px;box-shadow:0 0 0 2px #e8111b55,0 0 120px #e8111b33}
.tv video{width:100%;display:block;border-radius:14px}
.cap{font:10px/1.9 Px;margin-top:22px;color:#888}
/* the reveal */
#reveal{background:#000;position:relative;z-index:3}
#halo{position:absolute;left:50%;top:50%;width:24vmax;height:24vmax;margin:-12vmax;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff3c0 10%,#ffd24a 38%,#ffc83a 60%,#ffc83a 100%);transform:scale(0)}
#xcross{position:absolute;left:50%;top:50%;width:120px;height:192px;margin:-120px -60px;overflow:visible;filter:drop-shadow(0 0 30px #ffc83a) drop-shadow(0 0 80px #ffc83a)}
#r1,#r2{position:absolute;left:0;right:0;text-align:center;padding:0 5vw}
#r1{top:68%;font:italic clamp(24px,3.4vw,44px) var(--serif);color:var(--bone)}
#r2{top:50%;transform:translateY(-50%);font:900 clamp(56px,13vw,200px)/.95 var(--serif);letter-spacing:.06em;color:var(--ink);text-transform:uppercase;opacity:0}
#reveal .latin{position:absolute;bottom:7vh;left:0;right:0;text-align:center}
/* ACT II */
.light{background:var(--gold);color:var(--ink);position:relative;z-index:3}
.lbl{display:inline-block;font:10px Px;background:var(--ink);color:var(--gold);padding:8px 12px;margin-bottom:22px}
h2{font:900 clamp(36px,7vw,100px)/.95 var(--serif);text-transform:uppercase;letter-spacing:.04em}
.in{max-width:1180px;margin:auto;padding:0 6vw}
#clash{background:var(--gold);position:relative;overflow:hidden}
.side{position:absolute;top:-4%;bottom:-4%;width:58%}
#cl{left:0;clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
#cr{right:0;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.side .shot{position:absolute;inset:0;overflow:hidden}.side .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000d,#0000 55%)}.side .shot.l img{transform:scale(1.25);transform-origin:60% 55%}.side .shot.r img{transform:scale(1.1);transform-origin:50% 55%}
.side h3{position:absolute;z-index:4;bottom:12%;font:900 clamp(30px,5vw,72px)/1 var(--serif);text-transform:uppercase;letter-spacing:.05em;text-shadow:4px 4px 0 #000}
.side small{display:block;font:9px/1.9 Px;letter-spacing:.05em;margin-top:8px;max-width:340px;text-shadow:none;color:#fff}
#cl h3{left:5vw;color:#fff}#cr h3{right:5vw;text-align:right;color:var(--gold)}#cr small{margin-left:auto}
#vs{position:absolute;left:50%;top:46%;z-index:8;font:900 clamp(110px,24vw,380px)/1 var(--serif);transform:translate(-50%,-50%) scale(0);color:#fff;-webkit-text-stroke:10px #000;paint-order:stroke fill;text-shadow:0 16px 0 #000,0 0 80px var(--gold)}
#flash{position:absolute;inset:0;background:#fff;z-index:9;opacity:0;pointer-events:none}
.spark{position:absolute;z-index:7;width:10px;height:10px;background:#fff;pointer-events:none}
#clash .head{position:absolute;z-index:6;top:12vh;left:0;right:0;text-align:center}
#clash .head .lbl{background:#000}
.sect{padding:16vh 0}
.verbs{font:900 clamp(48px,11vw,170px)/.9 var(--serif);text-transform:uppercase;letter-spacing:.02em;margin:30px 0 40px}
.verbs span{display:block;width:fit-content;transition:transform .12s steps(3),color .12s,background .12s;padding:0 .1em}
.verbs span:hover{transform:skewX(-8deg) translateX(30px);background:var(--ink);color:var(--gold)}
.verbs span:nth-child(even){margin-left:auto;text-align:right}
.lead{font-size:clamp(20px,2.2vw,28px);max-width:820px;line-height:1.5}
.lead b{background:var(--ink);color:var(--gold);padding:0 .25em}
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:70px}
.gal img{width:100%;height:100%;object-fit:cover;image-rendering:auto;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);transition:transform .15s steps(3)}
.gal img:hover{transform:scale(1.06) rotate(-1.5deg);z-index:4;position:relative}
.gal img:nth-child(1){grid-column:span 4;grid-row:span 2}.gal img:nth-child(2){grid-column:span 2}.gal img:nth-child(3){grid-column:span 2}.gal img:nth-child(n+4){grid-column:span 2}
.gal{grid-auto-rows:160px}
.alpha{background:var(--ink);color:var(--bone);position:relative;z-index:3;overflow:hidden}
.alpha h2{color:var(--red)}
.big-stamp{position:absolute;right:-2vw;top:8vh;font:900 clamp(100px,22vw,320px) var(--serif);color:transparent;-webkit-text-stroke:3px #e8111b55;transform:rotate(8deg);letter-spacing:.05em;pointer-events:none}
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:40px;position:relative}
.road div{border:4px solid var(--gold);padding:22px;background:#120e08}
.road b{display:block;font:10px Px;color:var(--gold);margin-bottom:10px}
.road .now{background:var(--red);border-color:#fff;color:#fff}.road .now b{color:#fff}
.ticker{background:var(--red);color:#fff;font:900 34px var(--serif);letter-spacing:.1em;padding:14px 0;white-space:nowrap;overflow:hidden;border-block:5px solid #000;position:relative;z-index:3;text-transform:uppercase}
.ticker div{display:inline-block}
/* donate */
#support{background:var(--gold);color:var(--ink);text-align:center;position:relative;overflow:hidden;z-index:3;padding:18vh 0 16vh}
#rays{position:absolute;left:50%;top:50%;width:300vmax;height:300vmax;margin:-150vmax;background:repeating-conic-gradient(#fff4 0 6deg,transparent 6deg 12deg)}
#support .in{position:relative}
#support h2{font-size:clamp(50px,11vw,170px);text-shadow:6px 6px 0 #fff}
#support h2 em{font-style:normal;color:var(--red);text-shadow:6px 6px 0 #000}
#support .lead{margin:26px auto 40px}
#donate{font-size:clamp(16px,2.4vw,28px);padding:34px 56px;background:var(--red);color:#fff;border:6px solid #000;box-shadow:0 14px 0 #000;position:relative}
#donate:hover{transform:translateY(6px) scale(1.03);box-shadow:0 8px 0 #000}
#donate:active{transform:translateY(14px);box-shadow:0 0 0 #000}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:860px;margin:54px auto 0}
.tier{background:#fff;border:5px solid #000;box-shadow:8px 8px 0 #000;padding:18px;text-decoration:none;color:var(--ink);transition:transform .1s steps(2)}
.tier:hover{transform:translate(-4px,-6px) rotate(-2deg);box-shadow:12px 12px 0 var(--red)}
.tier b{display:block;font:900 44px var(--serif);color:var(--red)}.tier span{font:9px/1.8 Px}
.coin{position:fixed;z-index:97;pointer-events:none;font:900 30px var(--serif);color:var(--red);text-shadow:2px 2px 0 #000}
.toast{position:fixed;left:50%;top:40%;z-index:98;transform:translate(-50%,-50%);font:900 clamp(40px,9vw,120px) var(--serif);color:#fff;-webkit-text-stroke:6px #000;paint-order:stroke fill;pointer-events:none;white-space:nowrap}
footer{background:#000;color:var(--bone);text-align:center;padding:90px 20px 50px;position:relative;z-index:3}
footer .gt{font-size:clamp(40px,9vw,120px)}
footer p{font:9px Px;margin-top:28px;color:#777}
@media(max-width:800px){nav .links{display:none}.side{width:70%}.gal{grid-template-columns:1fr 1fr}.gal img:nth-child(n){grid-column:span 1;grid-row:auto}.verbs span:nth-child(even){margin-left:0;text-align:left}}
.hm{position:fixed;z-index:95;width:26px;height:26px;margin:-13px;border:3px solid var(--red);transform:rotate(45deg);pointer-events:none}

@media(max-width:800px){
body{font-size:17px}
nav{padding:10px 14px}nav .brand{font-size:12px}nav .brand img{width:28px;height:28px}
.gt{letter-spacing:.06em}
#hero{padding:0 6vw}#hero .logo{width:72px;height:72px}.tag{font-size:16px}.cue{font-size:8px;text-align:center;padding:0 6vw}
.slide{padding:0 6vw}.slide .time{font-size:26vw}.slide h3{font-size:9vw}
.meter{left:6vw;right:6vw;bottom:22px;font-size:8px;gap:8px}
#foot{padding:12vh 4vw}.tv{padding:8px;border-width:4px;border-radius:18px}
.side{width:70%}.side h3{font-size:8vw}.side small{font-size:7px;max-width:52vw}#cl h3{left:4vw;bottom:auto;top:26vh;max-width:40vw;font-size:7vw}#cr h3{right:4vw;bottom:9%}.side .shot img{transform:none!important}.side .shot.l img{object-position:60% 50%}.side .shot.r img{object-position:38% 50%}body::before{display:none}
#vs{font-size:36vw;-webkit-text-stroke:6px #000}
#clash .head{top:10vh}
.sect{padding:10vh 0}.in{padding:0 5vw}
.verbs{font-size:17vw}.verbs span:nth-child(even){margin-left:auto}
.gal{grid-template-columns:1fr 1fr;grid-auto-rows:110px;gap:10px;margin-top:40px}
.gal img:nth-child(1){grid-column:span 2;grid-row:span 2}.gal img:nth-child(n+2){grid-column:span 1;grid-row:auto}
.big-stamp{font-size:42vw;top:2vh}.road{grid-template-columns:1fr}
.ticker{font-size:20px}
#donate{padding:22px 26px;font-size:15px}.tiers{grid-template-columns:1fr 1fr 1fr;gap:10px}.tier{padding:10px}.tier b{font-size:26px}.tier span{font-size:7px}
#support h2{font-size:16vw}
.btn{padding:16px 18px;font-size:10px}
}