*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}html,body,#root{position:fixed;top:0;left:0;width:100%;height:100%;background:#63cff4;overflow:hidden;touch-action:manipulation;transition:background .5s ease}.night-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#030f2d;-webkit-backdrop-filter:brightness(.5);backdrop-filter:brightness(.5);z-index:-10;pointer-events:none;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}canvas{display:block;touch-action:none;outline:none;transition:filter .5s ease}canvas.night-mode{filter:brightness(.73) contrast(1.1)}button,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.loadingScreen{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:inherit;transition:opacity .8s;z-index:10}.loadingScreen__board{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .4s}.loadingScreen__progress{position:relative;width:200px;height:25px;background-color:#f8e9e9;border-radius:24px;border:dashed 4px #d13209;overflow:hidden;display:flex;align-items:center;justify-content:center}.loadingScreen__progress__value{font-family:Helvetica,Arial;position:absolute;left:0;top:0;bottom:0;background-color:#ffdd00b7;transition:width .4s ease;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;min-width:50px}.loadingScreen__title{font-family:Helvetica,Arial;margin:0;font-size:smaller;font-weight:700;color:#fff;text-align:center;letter-spacing:1px}.startButton>div{font-family:Helvetica,Arial;position:absolute;background:#03d8fd;padding:20px;white-space:nowrap;overflow:hidden;border-radius:30px}.startBtn{font-family:Helvetica,Arial;color:#fff;background:none;border:none;font-size:larger;font-weight:700}.startButton :hover{cursor:pointer;background:#0395fd}.instruction-wrapper{position:fixed!important;right:2vw;top:50%;transform:translateY(-50%)!important;z-index:100}.instruction-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(50px,2.5vw,25px);background-color:#3a9fda;padding:clamp(30px,4vw,40px);border-radius:15px;width:clamp(380px,45vw,500px);height:clamp(380px,45vw,500px);max-width:500px;max-height:500px;box-sizing:border-box;transform:scale(1)}.instruction-text{font-family:Helvetica,Arial;text-align:center;line-height:25px;font-size:16px;color:#fff;margin:0}.controls{display:flex;flex-direction:column;align-items:center;gap:4px}.controls .raw{display:flex;justify-content:center;gap:0}.controls .key{font-family:Helvetica,Arial;width:40px;height:40px;margin:4px;border:2px solid #ffffff;background:#fff4;color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:5px;transition:all .1s}.controls .key.active{background:#fff9;transform:scale(.95)}.got-it-btn{font-family:Helvetica,Arial;color:#fff;background:#03d8fd;border:none;font-size:16px;font-weight:700;padding:12px 40px;border-radius:25px;cursor:pointer;transition:all .2s;box-shadow:0 4px 10px #0003;margin-top:5px}.got-it-btn:hover{background:#0280d8;transform:translateY(-2px);box-shadow:0 6px 15px #0000004d}.cat-instruction-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,1.5vw,10px);background-color:#43a6de;padding:clamp(30px,4vw,40px);border-radius:20px;width:clamp(500px,45vw,500px);height:clamp(270px,45vw,270px);max-width:500px;max-height:500px;box-sizing:border-box;transform:scale(1)}.cat-instruction-text{font-family:Helvetica,Arial;text-align:center;line-height:25px;font-size:18px;color:#fff;margin:0}.dimsum-logos{display:flex;flex-direction:column;align-items:center;gap:4px}.dimsum-logos .raw{display:flex;justify-content:center;gap:0}.dimsum-logos .key{width:45px;height:45px;margin:5px;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;border-radius:30px;transition:all .1s;filter:grayscale(100%)}.dimsum-logos .key.active{border:4px solid #f5eaaa;transform:scale(.95);filter:grayscale(0%);box-shadow:0 0 3px #f8f8a7,0 0 8px #f8f8a7,0 0 12px #f8f8a7}.button{font-family:Helvetica,Arial;position:absolute;display:flex;z-index:100;top:clamp(6px,1vw,10px);width:100%;height:clamp(15px,2vw,20px);justify-content:flex-end;gap:clamp(8px,1.5vw,15px);padding-right:clamp(10px,2vw,20px);box-sizing:border-box}.btn1,.btn2,.btn3{font-family:Helvetica,Arial;color:#fff;width:clamp(14px,1.8vw,20px);height:clamp(14px,1.8vw,20px);border:none;border-radius:50%;font-size:clamp(7px,.9vw,10px);font-weight:400;text-align:center;display:flex;align-items:center;justify-content:center;padding:0;transition:all .3s ease;flex-shrink:0}.btn1{background:#f08266;margin-left:0}.btn2{background:#f593cc;font-weight:700}.btn3{background:#f5bd68}.button button:hover{cursor:pointer;background:#efde6f;transform:scale(1.1)}.end-container{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;z-index:100;box-sizing:border-box}.picture-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f8f4ed;padding:clamp(60px,4vw,60px);border-radius:20px;width:clamp(500px,45vw,700px);max-width:700px;box-sizing:border-box;box-shadow:0 10px 20px #0000004d}.picture{width:100%;max-width:580px;height:auto;border-radius:10px;object-fit:cover;box-shadow:0 3px 8px #0003}.end-text{font-family:Helvetica,Arial;margin-top:4rem;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:#32312e;text-align:center}@media screen and (max-width:1024px){.instruction-wrapper{right:3vw}.instruction-container{width:420px;height:420px;padding:35px;gap:22px}.cat-instruction-container{width:350px;height:300px;padding:35px;gap:20px}.instruction-text{font-size:16px;line-height:24px}.startButton>div{padding:15px;border-radius:25px}.startBtn{font-size:1rem}.button{top:8px;height:18px;gap:12px;padding-right:15px}.btn1,.btn2,.btn3{width:16px;height:16px;font-size:9px}.picture-container{width:clamp(400px,60vw,600px);padding:clamp(60px,3.5vw,35px)}.picture{width:80%}.end-text{font-size:clamp(1rem,3.5vw,1.3rem);margin-top:clamp(2.5rem,2.5vw,1.8rem)}}@media screen and (max-width:768px){.instruction-wrapper{right:50%;top:auto;bottom:5vh;transform:translate(50%)!important}.instruction-container{width:320px;height:320px;padding:10px;gap:14px;transform:scale(.9)}.cat-instruction-container{width:350px;height:300px;padding:15px;gap:14px;transform:scale(.9)}.instruction-text{font-size:14px;line-height:20px}.controls .key{width:40px;height:40px;font-size:16px}.got-it-btn{font-size:15px;padding:11px 35px}.startButton>div{padding:8px;border-radius:25px}.startBtn{font-size:.9rem}.button{top:7px;height:16px;gap:10px;padding-right:12px}.btn1,.btn2,.btn3{width:18px;height:18px;font-size:10px}.end-container{padding:1rem}.picture-container{width:clamp(280px,90vw,400px);padding:clamp(60px,4vw,25px)}.picture{width:85%}.end-text{font-size:clamp(.8rem,5vw,1rem);margin-top:clamp(2rem,3vw,1.2rem)}}@media screen and (max-width:480px){.instruction-container{width:320px;height:320px;padding:22px;gap:18px;transform:scale(.9)}.cat-instruction-container{width:350px;height:280px;padding:22px;gap:18px;transform:scale(.9)}.instruction-text{font-size:13px;line-height:18px}.controls .key{width:36px;height:36px;font-size:14px;margin:4px}.got-it-btn{font-size:14px;padding:10px 30px}.startButton>div{padding:10px 12px;border-radius:20px}.startBtn{font-size:.8rem}.button{top:6px;height:14px;gap:8px;padding-right:10px}.btn1,.btn2,.btn3{width:18px;height:18px;font-size:10px}.picture-container{width:95vw;padding:30px}.picture{width:90%}.end-text{font-size:1.1rem;margin-top:2.5rem}}
