*{margin:0;padding:0;box-sizing:border-box}body{font-family:Comic Sans MS,Comic Sans,Chalkboard SE,cursive;background:linear-gradient(135deg,#ff006e,#8338ec,#3a86ff,#ff006e);background-size:400% 400%;animation:gradientShift 8s ease infinite;min-height:100vh;color:#fff;overflow-x:hidden}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;position:relative}.title{font-size:3rem;text-align:center;text-shadow:4px 4px 0 #000,-2px -2px 0 #ff0,2px -2px 0 #0ff;margin-bottom:10px;animation:titlePulse 2s ease-in-out infinite}.title-name{font-size:5rem;color:#fd0;display:block;text-shadow:4px 4px 0 #000,-3px -3px 0 #f00;animation:nameWiggle 1s ease-in-out infinite}@keyframes titlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes nameWiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.subtitle{font-size:1.3rem;text-align:center;margin-bottom:30px;text-shadow:2px 2px 0 #000;max-width:500px}.code-form{background:#0009;border:4px solid #ffdd00;border-radius:20px;padding:40px;width:100%;max-width:500px;display:flex;flex-direction:column;gap:20px;box-shadow:0 0 30px #fd06}.input-group{display:flex;flex-direction:column;gap:6px}.input-wrapper{position:relative;display:flex}.input-wrapper .code-input{width:100%}.lock-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.4rem;pointer-events:none}.input-label{font-size:1.1rem;color:#fd0;text-shadow:2px 2px 0 #000;font-weight:700}.code-input{font-family:Comic Sans MS,cursive;font-size:1.2rem;padding:14px 18px;border:3px solid #8338ec;border-radius:12px;background:#ffffff1a;color:#fff;outline:none;transition:all .3s}.code-input::placeholder{color:#fff6;font-style:italic}.code-input:focus{border-color:#fd0;box-shadow:0 0 15px #ffdd0080}.code-input.matched{border-color:#0f8;background:#0f83;box-shadow:0 0 20px #0f86}.submit-btn{font-family:Comic Sans MS,cursive;font-size:1.5rem;font-weight:700;padding:16px 32px;border:4px solid #ffdd00;border-radius:16px;background:linear-gradient(180deg,#ff006e,#c9002e);color:#fff;cursor:pointer;text-shadow:2px 2px 0 #000;transition:all .2s;text-transform:uppercase}.submit-btn:hover{transform:scale(1.08);box-shadow:0 0 25px #ff006e99}.submit-btn:active{transform:scale(.95)}.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.attempts-hint{text-align:center;font-size:1rem;color:#fd0;text-shadow:1px 1px 0 #000}.shake{animation:shakeIt .5s ease}@keyframes shakeIt{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-10px)}30%,70%{transform:translate(10px)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:4px solid #ff006e;border-radius:24px;padding:40px;max-width:500px;width:100%;text-align:center;box-shadow:0 0 40px #ff006e80}.bounce{animation:bounceIn .5s cubic-bezier(.68,-.55,.265,1.55)}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.modal-emoji{font-size:4rem;margin-bottom:16px}.modal-text{font-size:1.3rem;margin-bottom:24px;line-height:1.5;text-shadow:1px 1px 0 #000}.modal-btn{font-family:Comic Sans MS,cursive;font-size:1.2rem;padding:12px 28px;border:3px solid #ffdd00;border-radius:12px;background:linear-gradient(180deg,#8338ec,#5a189a);color:#fff;cursor:pointer;text-shadow:1px 1px 0 #000;transition:all .2s}.modal-btn:hover{transform:scale(1.08);box-shadow:0 0 20px #8338ec99}.success-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px;background:linear-gradient(135deg,#00b4d8,#0077b6,#023e8a);background-size:400% 400%;animation:gradientShift 8s ease infinite}.success-title{font-size:2.5rem;text-align:center;text-shadow:3px 3px 0 #000;margin-bottom:20px;color:#fd0;animation:titlePulse 2s ease-in-out infinite}.success-text{font-size:1.5rem;text-align:center;text-shadow:2px 2px 0 #000;margin-bottom:40px;max-width:600px}.images-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;max-width:900px}.success-image{max-width:min(400px,100%);max-height:500px;width:auto;height:auto;border:5px solid #ffdd00;border-radius:16px;box-shadow:0 0 30px #fd06;transition:transform .3s}.success-image:hover{transform:scale(1.05) rotate(1deg)}@media(max-width:600px){.title{font-size:2rem}.title-name{font-size:3rem}.code-form{padding:24px}.success-title{font-size:1.8rem}}