@keyframes dsp-blink{49.9%{color:#000;background:yellow}50%{background:radial-gradient(#a60505,#bb3131);color:#fff}99.9%{color:#fff;background:radial-gradient(#a60505,#bb3131)}to{color:#000;background:yellow}}html,body{margin:0;width:100%;height:100%;overflow:hidden;background-color:#33c03e;font-family:sans-serif;user-select:none;touch-action:none}*{position:relative;box-sizing:border-box;user-select:none}canvas{width:100%;height:100%;position:absolute;top:0;left:0;z-index:100;pointer-events:none}:root{--game-scale: .8}.game-wrap{width:1000px;height:800px;display:flex;align-items:center;justify-content:center;box-sizing:content-box;border-radius:60px;padding:100px 22px;background-color:#111;margin:0 auto;transform:translate3d(-50%,-50%,0) scale(var(--game-scale));position:absolute;left:50%;top:50%;animation:5s bob linear infinite;&.landscape{padding:22px 100px}}@keyframes bob{50%{transform:translate3d(-50%,-51%,0) scale(var(--game-scale))}}.bubble{position:absolute;top:102%;left:10px;width:40px;height:40px;backface-visibility:hidden;animation:15s tank-bubble linear infinite;>div{animation:1.5s tank-bubble-x ease-in-out infinite;border-radius:100%;width:100%;height:100%;border:3px solid rgb(1,255,1);opacity:.3;transform:translate(0)}}@keyframes tank-bubble{to{transform:translateY(-10000%)}}@keyframes tank-bubble-x{50%{transform:translate(-50%)}}.scan-lines{position:absolute;inset:0;background:repeating-linear-gradient(transparent,transparent 3px,#bbb 3px,#bbb 6px);z-index:10000;opacity:1;mix-blend-mode:soft-light;pointer-events:none;background:repeating-linear-gradient(transparent,transparent 3px,#fff 3px,#fff 6px);mix-blend-mode:lighten;opacity:.14}.scan-lines-2{position:absolute;inset:-3px 0 0;content:"";background:repeating-linear-gradient(transparent,transparent 3px,#333 3px,#333 6px);mix-blend-mode:multiply;z-index:10001;opacity:.1;pointer-events:none;display:none}@keyframes beam{0%{background-position:0px 0}to{background-position:1000px 0}}@keyframes beam2{0%{background-position:0 0}to{background-position:0 2000px}}@keyframes bubbles{50%{background-position:310px -500px,500px -1020px}to{background-position:0 -1000px,20px -2020px}}.honeycomb{background:radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0) 21px 30px,radial-gradient(circle farthest-side at 0% 50%,#b71 24%,rgba(240,166,17,0) 0) 19px 30px,linear-gradient(#fb1 14%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 85%,#fb1 0) 0 0,linear-gradient(150deg,#fb1 24%,#b71 0,#b71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#b71 0,#b71 76%,#fb1 0) 0 0,linear-gradient(30deg,#fb1 24%,#b71 0,#b71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#b71 0,#b71 76%,#fb1 0) 0 0,linear-gradient(90deg,#b71 2%,#fb1 0,#fb1 98%,#b71 0%) 0 0 #fb1;background-size:40px 60px;background-blend-mode:saturation}.order-list{display:flex;flex-direction:column;justify-content:flex-start;width:18%;height:100%;overflow:hidden;padding-top:20px;background-color:#76a777;border-radius:30px 0 0 30px;transition:background-color .3s ease-in-out;&.timeout{background-color:red}&:after{content:"";position:absolute;width:100%;height:100%;bottom:0;left:0;background-image:linear-gradient(1deg,red .5%,transparent 0);background-position:0 0;z-index:3;opacity:.2;animation:beam2 .3s ease-in-out infinite;mix-blend-mode:color-burn;background-size:100% 100%}.order-item{transform:translateZ(0);width:100%;height:30px;background-color:#eee;margin:10px 0;padding:5px 0 0 10px;opacity:0;font-size:20px;&.active{background-color:#ddd}&:before{content:"X";position:absolute;right:0;top:0;height:100%;display:none;background-color:purple;color:#fff;padding:0 5px}&.active:before{display:flex;justify-content:center;align-items:center}}&.show .order-item{opacity:1}}.workspace{background-color:#0ff;width:50%;height:100%;margin:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding-top:30px;transition:background-color .3s ease-in-out;&.success{background-color:#14d514}&.fail{background-color:red}.recipe-progress{display:none}&.active-order .recipe-progress{height:200px;width:80%;border:2px solid blue;border-radius:10px;padding:20px;display:block;animation:pulse 1s ease-in-out infinite;&.complete{animation:none}}.order-submit,.next-round{background:green;color:#fff;padding:5px 10px;width:100px;border-radius:20px;text-align:center;display:none;font-weight:700;font-size:44px;animation:pulse 1s ease-in-out infinite;&.disabled{opacity:.3;animation:none}}.next-round{display:block;margin:35px auto}&.active-order .order-submit{display:block}&:after{content:"";position:absolute;width:100%;height:100%;bottom:0;left:0;background-image:linear-gradient(0deg,red 1%,transparent 0);background-position:0 0;z-index:3;opacity:.2;animation:beam2 .2s ease-in-out infinite;mix-blend-mode:color-burn;background-size:100% 100%;pointer-events:none}.project{border:2px inset #000;width:100%;height:50%;background-color:#444;display:none;opacity:.8;overflow:hidden}&.active-order .project{display:block}.recipe-progress-instructions{font-size:25px;>div{font-size:20px;margin-top:10px;line-height:1.3}}}@keyframes pulse{50%{transform:scale(1.1)}}.order-parts{display:flex;flex-direction:column;justify-content:center;width:30%;height:100%;background:#383142;padding:1%;border-top-right-radius:30px;border-bottom-right-radius:30px;&:after{content:"";position:absolute;width:100%;height:100%;bottom:0;left:0;background-image:linear-gradient(1deg,red .5%,transparent 0);background-position:0 0;z-index:300;opacity:.2;animation:beam2 .3s ease-in-out infinite;mix-blend-mode:color-burn;background-size:100% 200%;transform:rotate(180deg)}}.parts-enablers{display:flex;width:100%;justify-content:space-around;animation:dsp-blink 1.3s linear infinite;color:#000;background-color:#ff0;padding:20px;font-size:24px;font-weight:700;opacity:0;&.show{opacity:1}}.order-parts-items{display:flex;flex-direction:column;justify-content:center;flex-wrap:wrap;width:100%;height:80%;gap:10px;padding-right:10px;.order-part{width:50%;background-color:#eee;flex-basis:22%;overflow:hidden;transform:translateZ(0);&.active{background-color:#ddd}&:before,&:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:5;background:linear-gradient(45deg,#3e3741 0,#fff 100%);box-sizing:border-box}&:before{content:"K";color:red;font-size:40px;-webkit-text-stroke:1px #fff;font-family:sans-serif;display:flex;justify-content:center;align-items:center;transform:translate3d(-100%,0,0);transition:.3s transform;border:10px solid #e5ff00}&:nth-child(n+5):before{transform:translate3d(100%,0,0);content:"L"}&:after{background:none;box-shadow:inset 0 0 5px 1px #0000004d;z-index:6}&.col-disabled,&.step-disabled{&:before{transform:translateZ(0)}}.part{text-align:center;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:100%;z-index:4;font-size:23px;color:#000;padding:10px 5px;font-weight:700}.key{font-size:25px;text-align:right;padding:5px}&:nth-child(n+5) .key{text-align:left}}}.audio-text{position:absolute;top:0;left:0;color:#fff;font-size:5vw;display:flex;justify-content:center;align-items:center;background-color:#000;width:100%;height:100%;z-index:999;cursor:pointer;pointer-events:all;&.hide{opacity:0;pointer-events:none}}.title-wrap,.title{position:absolute;width:100%;height:100%;z-index:100}.title-wrap{pointer-events:none}.title{background:#000;pointer-events:all}.title.hide{opacity:0;pointer-events:none}.title-word{color:#157408;font-size:15vmin;font-family:sans-serif;text-shadow:red 0 0 20px;-webkit-text-stroke:3px red;position:absolute;transform:translate(-50%,-50%);left:50%;animation:.3s flicker linear forwards;opacity:0;width:100%;text-align:center}.fear{top:15%;animation-delay:.5s}.species{bottom:10%;animation-delay:2.5s}.tank-wrap{height:20vh;aspect-ratio:1/2;position:absolute;left:50%;transform:translate(-50%,-50%);animation:.3s flicker linear forwards;animation-delay:1.5s;opacity:0;top:44%}.tank{background:#157408;height:20vh;aspect-ratio:1/2;position:absolute;left:50%;transform:translate(-50%);.top,.bottom{background-color:#157408;width:99%;aspect-ratio:3;position:absolute;left:50%;transform:translate(-50%,-50%);border-radius:100%;top:0;border:5px solid #19870b;box-shadow:0 0 10px #19870b}.bottom{top:auto;bottom:0;transform:translate(-50%,50%)}}.tank-over{background:linear-gradient(45deg,#3e3741 0,#fff 100%);height:30vh;aspect-ratio:1/2;position:absolute;left:50%;top:50%;transform:translate(-50%,-70%);mix-blend-mode:overlay}.specimen{border-radius:100%;background-color:#000;width:40%;height:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + .1vh));opacity:.3;animation:5s bob-s ease-in-out infinite;.head{border-radius:100%;background-color:#000;width:70%;height:50%;position:absolute;left:80%;top:10%;transform:translate(-50%,-50%);.eye{width:30%;aspect-ratio:1.6;background-color:green;position:absolute;left:20%;top:30%;border-radius:100%;animation:15s look ease-in-out infinite;&.r{left:60%}}}.body{border-radius:100%;background-color:#000;width:70%;height:60%;position:absolute;left:90%;top:80%;transform:translate(-50%,-50%)}}.tube,.tube-2{position:absolute;top:20%;left:46%;background-color:transparent;width:34%;height:40%;border-radius:30px;opacity:1;animation:5s bob-s ease-in-out infinite;transform:translate(-50%,calc(-50% + .1vh));border-style:inset;border-color:transparent;border-width:4px;border-left-color:#1ba719}.tube-2{border-left-color:transparent;border-right-color:#195318;left:56.5%;height:24.5%;top:11%}.hookup{position:absolute;top:.4%;left:50%;background-color:#083e07;width:40%;height:10%;border-radius:100%;opacity:1;transform:translate(-50%,-50%)}.top-lid,.bottom-lid{position:absolute;width:100%;left:0;height:50%;background-color:#000;transition:transform .5s ease-in-out;z-index:100;&.closed{transform:translateY(0)}}.top-lid{top:0;transform:translateY(-100%)}.bottom-lid{bottom:0;transform:translateY(100%)}@keyframes bob-s{50%{transform:translate(-50%,calc(-50% - .6vh))}}@keyframes look{50%{aspect-ratio:4.6}}@keyframes flicker{25%{opacity:0}50%{opacity:1}75%{opacity:0}to{opacity:1}}.shift-select{position:absolute;top:0;left:0;width:100%;height:100%;padding:30px 10px;opacity:0;pointer-events:none;&.show{opacity:1;pointer-events:unset}.posting{border-left:3px solid #000;overflow:hidden;border-bottom:3px solid #000;padding:20px 30px;.posting:first-child{margin-top:25px}h1 {margin-top: 10px; margin-bottom: 15px;} > div {margin-top: 15px; font-size: 25px; animation: pulse 1.5s ease-in-out infinite; &.disabled {opacity: .3; animation: none;} .rank {font-weight: bold; font-size: 35px; transform: translateY(-50%); top: 50%; position: absolute; right: 0; color: silver; filter: drop-shadow(0 0 1px #999); -webkit-text-stroke: black 1px; &.A {color: gold;} &.B {color: silver;} &.C {color: olivedrab;}}}}}.shift-header{position:absolute;top:0;left:0;width:100%;height:100%;padding:20px 20px 0;text-align:center;pointer-events:none;h2 {margin-top: 0; margin-bottom: 0;} > div {font-size: 40px; margin-top: 20px; text-align: center; &:nth-child(3) {color: green;} &:nth-child(4) {color: red;} &.duty-select-prompt {position: absolute; top: 20%; left: 50%; transform: translate(-50%,-50%); color: #000; animation: dsp-blink 1.3s linear infinite; padding: 20px; opacity: 0; width: 100%; background-color: yellow; &.show {opacity: 1;}}}}.v-keys{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;>div{display:flex;justify-content:stretch;align-items:center;left:50%;transform:translate(-50%);pointer-events:all;>div{flex-grow:1;font-size:50px;font-weight:700;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;padding-top:20px;padding-bottom:20px;filter:drop-shadow(0px 0px 6px #fff);width:100%;&.active{color:purple;&:before{box-shadow:0 0 10px purple;background-color:#8000804d}}&:before{content:"";display:block;position:absolute;inset:10px;box-shadow:0 0 10px #fff;border-radius:80%;z-index:-1}}}.v-keys-set-1{position:absolute;width:90%;bottom:-9px}.v-keys-set-2{position:absolute;width:90%;top:0}.down{transform:rotate(180deg)}.up,.down{border-top:20px solid transparent;&:before{top:0;bottom:20px}}}.landscape{.v-keys-set-1,.v-keys-set-2{pointer-events:all;flex-direction:column;top:50%;transform:translateY(-50%);width:auto;bottom:auto;height:90%;>div{padding-left:20px;padding-right:20px}}.v-keys-set-1{width:90px;left:6px}.v-keys-set-2{right:6px;width:90px;left:auto}.up,.down{border-top:20px solid transparent;&:before{top:10px;bottom:10px}}}.end{background-color:#000;position:absolute;left:0;right:0;width:100%;height:100%;z-index:101;color:#fff;font-size:5vmin;opacity:0;pointer-events:none;.outro-text,.created-by{position:absolute;left:0;top:0;text-align:center;padding:4vmin 10vw;width:100%;opacity:0;transition:opacity 2.5s ease-in-out;transition-delay:1.8s}.outro-text{-webkit-text-stroke:red 2px}.created-by{top:auto;bottom:0;font-size:3vmin}&.show{opacity:1;pointer-events:all;.outro-text,.created-by{opacity:1}}}.command-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:purple;width:300px;height:70px;border-top:30px solid #333;border-bottom:30px solid #333;border-radius:100%;z-index:9999;&:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:1910%;border:2px solid transparent;border-left:20px solid #555;border-right:20px solid #555;border-radius:100%;z-index:2}}.pulse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9999;box-shadow:0 0 10px 10px purple,inset 0 0 10px 10px purple;border-radius:100%;transform:translate(-50%,-50%) rotateY(100deg);animation:force-ring 1.8s linear;animation-delay:1.2s;opacity:0}.boom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;background-color:#e5e3ff;animation:boom 1.2s linear;animation-delay:1s;z-index:99999;border-radius:100%;filter:blur(30px)}@keyframes boom{0%{height:0;width:0}50%{height:400px;width:400px;opacity:1}to{height:400px;width:400px;opacity:0}}@keyframes force-ring{0%{height:0px;width:0px;opacity:0}1%{height:0px;width:0px;opacity:1}90%{height:4000px;width:4000px}to{height:4000px;width:4000px;opacity:0}}.covered-reset{width:100%;height:100%}.cover{position:absolute;left:50%;transform:translate(-50%,-50%);top:50%;width:40%;height:40%;background:#000;overflow:hidden;border-radius:5px;&:before{content:"\2d80\1248";position:absolute;background-color:#d4daff;opacity:.8;width:100%;height:100%;display:block;transform:translateY(0);transition:.3s transform ease-in-out;z-index:10;display:flex;justify-content:center;align-items:center;font-size:60px;color:red;-webkit-text-stroke:2px #5320ff}}.step-1 .covered-reset{.cover:before{transform:translateY(-90%)}}.light{background-color:red;position:absolute;top:10%;left:50%;transform:translate(-50%);width:10%;aspect-ratio:1;border-radius:100%;box-shadow:0 0 10px 10px red;animation:red-blink 1s linear infinite}.step-2 .covered-reset{.button{animation:blink 1s linear infinite}}.button{border:5px inset #eee;width:50%;aspect-ratio:1;background:radial-gradient(red,#000);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:100%;z-index:1}.step-3 .covered-reset{.light{background-color:green;box-shadow:0 0 10px 10px green;animation:none}.button{animation:none}.cover:before{transform:translateY(0)}}@keyframes blink{50%{background:radial-gradient(#a60505,#000)}}@keyframes red-blink{50%{background:#7f0404;box-shadow:0 0 10px 10px transparent}}.wiring{width:100%;height:100%;.housing{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#000;width:80%;height:80%;display:flex;justify-content:space-around;align-items:center;flex-direction:column;border-radius:20px}.wire-wrap{width:100%;height:10%;display:flex;.left,.right,.middle{height:100%;&:before,&:after{content:"";position:absolute}&:after{width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.4),transparent,rgba(0,0,0,.4))}}.left,.right{width:10%;&:before{right:0;top:50%;transform:translate(50%,-50%);height:33%;width:25px;background-color:silver}}.right{&:before{left:0;right:auto;transform:translate(-50%,-50%)}}.middle{width:100%;opacity:0;z-index:5;&:after{width:94%;left:50%;transform:translate(-50%)}}&.repaired .middle{opacity:1}.red:after{background-color:red}.green:after{background-color:green}.blue:after{background-color:#00f}.yellow:after{background-color:#ff0}.purple:after{background-color:purple}.orange:after{background-color:orange}.pink:after{background-color:pink}.blue-green:after{background-color:#40e0d0}}}.loose-panel{width:100%;height:100%;.housing{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#000;width:60%;height:60%;display:flex;justify-content:space-around;align-items:center;flex-direction:column;border-radius:20px;.panel{position:absolute;width:110%;height:110%;background:#2d0e47;transform:translate(30%) rotate(30deg);transition:transform .3s ease-in-out}}&.step-1{.housing .panel{transform:rotate(0)}}.hole{position:absolute;width:20px;height:20px;background-color:#000;border-radius:100%;&:before{position:absolute;content:"";display:block;width:100%;height:100%;background-color:#000;border-radius:100%;background-image:linear-gradient(silver 0%,silver 25%,black 25%,black 75%,silver 75%,silver 100%);transform:rotate(390deg);opacity:0;transition:transform 1s ease-in-out}&.filled:before{opacity:1;transform:rotate(0)}}.hole-1{left:5%;top:5%}.hole-2{left:5%;bottom:5%}.hole-3{right:5%;top:5%}.hole-4{right:5%;bottom:5%}}