*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Luckiest Guy,cursive;background-image:none;background-color:#eae3d9;min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;overflow-x:hidden}#soon-container{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:0;pointer-events:none}.soon-text{position:absolute;font-family:Luckiest Guy,cursive;color:#4a403a;opacity:.15;-webkit-user-select:none;user-select:none;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes fall{0%{transform:translateY(-10vh) rotate(-20deg)}to{transform:translateY(110vh) rotate(20deg)}}.app-header{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:10;cursor:pointer}.logo{width:250px;height:auto;animation:float-logo 3s ease-in-out infinite;transform-origin:center;filter:drop-shadow(5px 5px 3px rgba(0,0,0,.3))}@keyframes float-logo{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}#app-container{display:grid;place-items:center;width:100%}.step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;width:100%;max-width:400px;grid-column:1 / -1;grid-row:1 / -1;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .4s ease-in-out,transform .4s ease-in-out}.step.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}#start-quest-button{cursor:pointer;position:relative;transition:transform .6s ease-in,opacity .5s ease-in .1s;width:100%;display:flex;justify-content:center;align-items:center}#start-quest-button.zooming{transform:scale(5);opacity:0}.start-quest-image{width:380px;height:auto;filter:drop-shadow(10px 10px 0px rgba(0,0,0,.3))}.arrow-svg{position:absolute;top:65%;left:-40px;width:100px;height:auto;transform-origin:center;animation:point-diagonal-left 1.5s infinite ease-in-out;filter:drop-shadow(3px 3px 2px rgba(0,0,0,.2));z-index:5}@keyframes point-diagonal-left{0%,to{transform:translateY(-50%) rotate(30deg) translate(0)}50%{transform:translateY(-50%) rotate(25deg) translate(15px)}}.arrow-svg--right{left:auto;right:-40px;animation-name:point-diagonal-right}@keyframes point-diagonal-right{0%,to{transform:translateY(-50%) scaleX(-1) rotate(30deg) translate(0)}50%{transform:translateY(-50%) scaleX(-1) rotate(25deg) translate(15px)}}form{display:flex;flex-direction:column;gap:1.5rem;width:100%}input[type=text],input[type=password]{width:100%;padding:1rem;font-family:Luckiest Guy,cursive;font-size:1.5rem;text-align:center;background:#fff;border:4px solid black;border-radius:20px;box-shadow:8px 8px #000;outline:none;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out,background-color .3s ease;color:#000}input[type=text]:not(:placeholder-shown),input[type=password]:not(:placeholder-shown){background-color:#dcedc8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 40px #dcedc8 inset!important;-webkit-text-fill-color:black!important}input#wallet-input.invalid{background-color:#ffcdd2}input#wallet-input.invalid:-webkit-autofill,input#wallet-input.invalid:-webkit-autofill:hover,input#wallet-input.invalid:-webkit-autofill:focus,input#wallet-input.invalid:-webkit-autofill:active{-webkit-box-shadow:0 0 0 40px #ffcdd2 inset!important}input[type=text]:focus,input[type=password]:focus{box-shadow:0 0 #000;transform:translate(8px,8px)}form label{font-size:1.5rem;color:#000;text-shadow:2px 2px 0 white,-2px -2px 0 white,2px -2px 0 white,-2px 2px 0 white}.checkbox-container{display:flex;align-items:center;justify-content:center;gap:1rem}.checkbox-container label{font-size:1.2rem;color:#4a403a;text-shadow:1px 1px 0px rgba(255,255,255,.7)}input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:30px;height:30px;background:#fff;border:3px solid black;border-radius:8px;cursor:pointer;position:relative;box-shadow:4px 4px #000;flex-shrink:0}input[type=checkbox]:checked{background-color:#ffeb3b}input[type=checkbox]:checked:after{content:"✔";position:absolute;top:50%;left:50%;color:#000;font-size:1.5rem;animation:pop-in-check .3s ease-out;transform:translate(-50%,-50%) scale(1)}@keyframes pop-in-check{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}button{width:100%;padding:1rem;font-family:Luckiest Guy,cursive;font-size:1.5rem;color:#000;background:linear-gradient(180deg,#4ad5e1,#ff85b3);border:4px solid black;border-radius:20px;box-shadow:8px 8px #000;cursor:pointer;transition:all .2s ease-in-out;text-transform:uppercase}button:hover{transform:translate(4px,4px);box-shadow:4px 4px #000}button:active{transform:translate(8px,8px);box-shadow:0 0 #000}button:disabled,button:disabled:hover,button:disabled:active{background:#e0e0e0;color:#9e9e9e;box-shadow:8px 8px #bdbdbd;transform:none;cursor:not-allowed}button.yellow{background:linear-gradient(180deg,#fdd835,#f57f17)}button.share-button{background:linear-gradient(180deg,#1da1f2,#1991da);color:#fff;margin-top:1rem;text-shadow:1px 1px 0px rgba(0,0,0,.2)}.like-retweet-animate{animation:like-retweet-animation .6s ease-out}@keyframes like-retweet-animation{0%{transform:translate(8px,8px) scale(1);box-shadow:0 0 #000}25%{transform:translate(8px,8px) scale(1.05) rotate(-5deg);box-shadow:0 0 #000}50%{transform:translate(8px,8px) scale(1.05) rotate(5deg);box-shadow:0 0 #000}75%{transform:translate(8px,8px) scale(1.05) rotate(-2deg);box-shadow:0 0 #000}to{transform:translate(4px,4px) scale(1) rotate(0);box-shadow:4px 4px #000}}.image-frame{position:relative;background:#fff;border:4px solid black;border-radius:20px;padding:1rem;box-shadow:8px 8px #000;animation:bob-monster 2.2s infinite ease-in-out}.image-frame:after{content:"ENTER THE PASSWORD";position:absolute;bottom:-1.2rem;left:50%;transform:translate(-50%);background:linear-gradient(180deg,#fdd835,#f57f17);color:#000;padding:.5rem 1rem;border:3px solid black;border-radius:10px;font-size:1rem;text-transform:uppercase;white-space:nowrap}.password-image{width:180px;height:auto;display:block}.image-frame--success:after{content:"CONGRATULATIONS!";background:linear-gradient(180deg,#81c784,#4caf50)}.success-image{width:220px;height:auto;display:block}@keyframes bob-monster{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.step.active .success-title{animation:fade-in-pop .8s ease-out both}.step.active .success-subtitle{animation:fade-in-pop .8s ease-out .2s both}@keyframes fade-in-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.success-title{font-size:2.5rem;letter-spacing:2px;color:#4a403a;text-shadow:3px 3px 0px rgba(255,255,255,.7)}.success-subtitle{font-size:1.8rem;color:#4a403a;text-shadow:2px 2px 0px rgba(255,255,255,.7)}.shake{animation:shake .5s}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}#loader-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#eae3d9;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .5s ease-out .2s,visibility .5s ease-out .2s;gap:2rem}#loader-container.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-logo{width:320px;max-width:70%;height:auto;animation:float-logo 3s ease-in-out infinite;filter:drop-shadow(5px 5px 3px rgba(0,0,0,.3))}.loader-bar-container{width:80%;max-width:350px;height:30px;background:#fff;border:4px solid black;border-radius:20px;box-shadow:8px 8px #000;padding:4px;overflow:hidden}.loader-bar{width:0%;height:100%;background:linear-gradient(180deg,#fdd835,#f57f17);border-radius:12px;transition:width 1.5s cubic-bezier(.65,0,.35,1)}footer{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);color:#4a403a;font-family:sans-serif;font-size:.9rem;z-index:10}footer a{color:#4a403a;text-decoration:none;transition:text-decoration .2s ease}footer a:hover{text-decoration:underline}footer span{margin:0 .5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{background:#fff;color:#333;padding:2rem;border-radius:15px;width:90%;max-width:800px;max-height:85vh;overflow-y:auto;position:relative;font-family:Arial,sans-serif;transform:scale(.9);transition:transform .3s ease}.modal-overlay.active .modal-content{transform:scale(1)}.modal-close{position:absolute;top:1rem;right:1.5rem;background:none;border:none;font-size:2.5rem;color:#888;cursor:pointer;padding:0;line-height:1;box-shadow:none;width:auto}.modal-close:hover,.modal-close:active{color:#000;transform:none;box-shadow:none}#modal-title{font-family:Luckiest Guy,cursive;color:#000;margin-top:0;margin-bottom:1.5rem;font-size:2rem;text-align:left}.modal-body{line-height:1.6;text-align:left}.modal-body h3{margin-top:1.5em;margin-bottom:.5em}.modal-body p{margin-bottom:1em}@media (max-width: 480px){body{padding:1rem}.app-header .logo{width:200px}.step{gap:1.2rem;padding:0 .5rem}.start-quest-image{width:100%;max-width:380px}.arrow-svg{width:60px;left:-15px}.arrow-svg--right{left:auto;right:-15px}input[type=text],input[type=password],button{font-size:1.2rem;padding:.8rem;border-radius:15px;border-width:3px;box-shadow:6px 6px #000}button:hover{transform:translate(3px,3px);box-shadow:3px 3px #000}button:active{transform:translate(6px,6px);box-shadow:0 0 #000}.checkbox-container label{font-size:1rem}.success-title{font-size:2rem}.success-subtitle{font-size:1.5rem}footer{font-size:.8rem}.modal-content{padding:1.5rem}#modal-title{font-size:1.5rem}}@media (max-width: 360px){.app-header .logo{width:180px}.arrow-svg{display:none}}
