:root{--pink:#ff2d55;--pink20:rgb(from var(--pink) r g b / .2);--pink40:rgb(from var(--pink) r g b / .4);--cyan:#00f3ff;--yellow:gold;--purple:#420969;--purple50:rgb(from var(--purple) r g b / .5);--purple80:rgb(from var(--purple) r g b / .8)}*{font-family:DotGothic16,monospace}body{color:var(--pink);-webkit-user-select:none;user-select:none;touch-action:none;background-color:#000;margin:0;padding:0;overflow:hidden}#canvas-container{z-index:0;width:100vw;height:100vh;position:absolute;top:0;left:0}#ui-layer{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}#media{z-index:100;opacity:.2;position:fixed}#progress-container{background:var(--pink20);border:1px solid var(--pink40);width:100%;height:4px;position:absolute;top:0;left:0}#progress-container.hidden{display:none}#progress-bar{background:var(--pink);width:0%;height:100%;box-shadow:0 0 10px var(--pink)}#progress-time{text-shadow:0 0 5px var(--pink);font-size:12px;position:absolute;top:10px;right:0}#overlay-container{pointer-events:auto;z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .8s;display:flex;position:absolute;top:0;left:0}#overlay-container.hidden{opacity:0;pointer-events:none}.screen{text-align:center;border:3px ridge var(--pink);background:var(--purple50);box-shadow:0 0 30px var(--pink20), inset 0 0 20px var(--purple80);flex-direction:column;flex:auto;align-items:center;margin:10%;padding:5%;display:none}.screen.active{display:flex}h2{letter-spacing:4px;color:var(--cyan);text-shadow:0 0 10px var(--cyan);font-size:24px;font-weight:400}h3{letter-spacing:4px;color:var(--cyan);text-shadow:0 0 10px var(--cyan);font-size:20px;font-weight:400}.subtext{color:#888;letter-spacing:2px;font-size:16px}.mission-brief{text-align:left;border-left:4px solid var(--pink);color:#ddd;margin:1em 0;padding-left:1em;font-size:18px;line-height:1.5}.alt-text{color:var(--yellow);float:right;margin-left:2em}.primary-btn{background:var(--pink);color:#000;letter-spacing:2px;cursor:pointer;text-transform:uppercase;box-shadow:0 0 15px var(--pink40);border:none;margin-top:1em;padding:1em 3em;font-size:18px;font-weight:700;transition:all .3s}.primary-btn:hover{background:#fff;box-shadow:0 0 25px #fff}.spinner{border:4px solid var(--pink20);border-top:4px solid var(--pink);border-radius:50%;width:40px;height:40px;margin-bottom:20px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.glitch-container{position:relative}.title-glitch{letter-spacing:5px;color:#fff;text-shadow:0 0 20px var(--pink);margin:0;font-size:48px;font-weight:700}.title-glitch:before,.title-glitch:after{content:attr(data-text);background:#0a2e1c66;width:100%;height:100%;position:absolute;top:0;left:0}.title-glitch:before{text-shadow:-2px 0 var(--cyan);clip:rect(24px, 550px, 90px, 0);animation:3s linear infinite alternate-reverse glitch-anim;left:2px}.title-glitch:after{text-shadow:-2px 0 var(--pink);clip:rect(85px, 550px, 140px, 0);animation:2.5s linear infinite alternate-reverse glitch-anim;left:-2px}@keyframes glitch-anim{0%{clip:rect(10px, 9999px, 83px, 0)}5%{clip:rect(31px, 9999px, 60px, 0)}10%{clip:rect(5px, 9999px, 12px, 0)}15%{clip:rect(74px, 9999px, 98px, 0)}20%{clip:rect(2px, 9999px, 45px, 0)}25%{clip:rect(51px, 9999px, 73px, 0)}30%{clip:rect(12px, 9999px, 91px, 0)}35%{clip:rect(83px, 9999px, 34px, 0)}40%{clip:rect(44px, 9999px, 55px, 0)}45%{clip:rect(98px, 9999px, 21px, 0)}50%{clip:rect(15px, 9999px, 88px, 0)}55%{clip:rect(62px, 9999px, 49px, 0)}60%{clip:rect(29px, 9999px, 76px, 0)}65%{clip:rect(81px, 9999px, 14px, 0)}70%{clip:rect(55px, 9999px, 92px, 0)}75%{clip:rect(3px, 9999px, 67px, 0)}80%{clip:rect(76px, 9999px, 25px, 0)}85%{clip:rect(38px, 9999px, 81px, 0)}90%{clip:rect(91px, 9999px, 43px, 0)}95%{clip:rect(22px, 9999px, 59px, 0)}to{clip:rect(67px, 9999px, 11px, 0)}}