:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html,#root{margin:0;padding:0;height:100%;width:100%;min-height:100vh;overflow-x:hidden;font-family:Open Sans,sans-serif;background-color:#0a192f;color:#e2e8f0;text-rendering:optimizeLegibility;background-image:none}p,li,span,button,a,div{font-family:Open Sans,sans-serif;box-sizing:border-box}.app-container{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}.navbar{display:flex;justify-content:space-between;align-items:center;background-color:#0b2447;padding:1.2rem 4.5rem;box-shadow:0 4px 10px #0006;position:sticky;top:0;z-index:100;border-bottom:2px solid #5C7B7C}.navbar-title{font-family:Montserrat,sans-serif;font-size:2.3rem;font-weight:700;color:#64ffda;text-decoration:none;letter-spacing:.8px;transition:color .3s ease,text-shadow .3s ease;text-shadow:0 0 8px rgba(100,255,218,.4)}.navbar-title:hover,.contact-email:hover,.footer-title:hover{color:#ccfff3;text-shadow:0 0 12px rgba(204,255,243,.6)}.navbar-links{list-style:none;display:flex;gap:2.5rem;margin:0;padding:0;align-items:center}.navbar-links li .link-button,.footer-links li .link-button,.link-button{color:#94a3b8;text-decoration:none;padding:.7rem 1.4rem;border-radius:8px;transition:all .3s ease;font-weight:500;border:none;background:none;cursor:pointer;position:relative;font-size:1rem}.navbar-links li .link-button:hover,.footer-links li .link-button:hover,.link-button:hover{color:#e2e8f0}.main-content{flex-grow:1;display:flex;justify-content:center;align-items:center;background-color:#0a192f;padding:5rem 10rem}#phaser-container{border:4px solid #64FFDA;border-radius:15px;padding:10px 10px 5px;background-color:#071322;display:inline-block;margin:2% 0;box-shadow:0 0 25px #64ffdab3;transition:box-shadow .3s ease-in-out}#phaser-container:hover{box-shadow:0 0 35px #ccfff3e6}.footer{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;background-color:#0b2447;padding:2.5rem 4.5rem 1rem;box-shadow:0 -4px 10px #0006;border-top:2px solid #5C7B7C;color:#e2e8f0;gap:20px}.footer-title{font-family:Montserrat,sans-serif;font-size:2rem;font-weight:700;color:#64ffda;text-decoration:none;margin-bottom:1rem;white-space:nowrap;transition:color .3s ease,text-shadow .3s ease}.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.footer-links li{margin-bottom:0}.footer-social{display:flex;flex-direction:column;align-items:flex-start}.social-title,.legal-title{font-size:1.2rem;color:#64ffda;margin-bottom:10px}.social-icons{display:flex;gap:15px}.social-icon{width:30px;height:30px;filter:grayscale(100%) brightness(120%);transition:filter .3s ease,transform .3s ease}.social-icon:hover{filter:grayscale(0%) brightness(100%);transform:scale(1.1)}.footer-legal{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.footer-legal a{display:inline-block;margin:0;padding:0;font-size:.95rem}.copyright-notice{width:100%;text-align:center;margin-top:1rem;padding-top:1rem;border-top:solid #566984 1px;font-size:.9rem;color:#a0aec0;margin-bottom:0}.link-button{background-color:transparent;border:none;color:#a0aec0;padding:.5rem 1rem;text-decoration:none;font-size:1rem;cursor:pointer;transition:color .3s ease,transform .3s ease;white-space:nowrap;display:inline-block}.link-button:hover{color:#dfe5ee;transform:translateY(-2px)}.como-jugar-layout{display:flex;width:100%;box-sizing:border-box;background-color:#0a192f;color:#e2e8f0;padding:3.5rem 0}.column{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 25px}.column-center{flex:2;display:flex;flex-direction:column;align-items:center;padding:40px 50px;background-color:#0b2447;border-radius:12px;box-shadow:0 0 15px #00000080;border:1px solid rgba(92,123,124,.4)}.column-left,.column-right{flex:1;display:flex;justify-content:center;align-items:center;padding:0}.inner-column{height:100%;background-color:#64ffda;border-radius:10px;box-shadow:0 0 12px #64ffdab3;opacity:.7}.inner-column-thick{width:50px;height:85%}.inner-column-thin{width:15px;height:65%}.column-left .inner-column-thick{margin-left:2.5%}.column-right .inner-column-thick{margin-right:2.5%}.como-jugar-content{max-width:750px;text-align:center;line-height:1.7}.como-jugar-content h1,.como-jugar-content h2{font-family:Montserrat,sans-serif;color:#64ffda;margin-bottom:1.5rem;font-weight:600;text-shadow:0 0 6px rgba(100,255,218,.3)}.como-jugar-content p{margin-bottom:1rem;font-size:1.05rem}.object_p{display:flex;align-items:center;text-align:left;margin:12px 0;font-size:1rem;background-color:#5c7b7c1a;padding:8px 15px;border-radius:6px;border:1px solid rgba(92,123,124,.2)}.como-jugar-content img{width:32px;height:32px;object-fit:contain;margin-right:12px;filter:drop-shadow(0 0 3px rgba(255,255,255,.1))}.volver-btn,.submit-button{display:inline-block;margin-top:45px;padding:14px 30px;font-size:1.2rem;background-color:#0a192f;color:#e2e8f0;border:2px solid #64FFDA;border-radius:8px;text-decoration:none;text-align:center;transition:background .3s ease,transform .2s ease,box-shadow .3s ease,color .3s ease;box-shadow:0 5px 12px #0006;font-weight:600;cursor:pointer}.volver-btn:hover,.submit-button:hover{background-color:#64ffda;color:#0a192f;transform:translateY(-3px);box-shadow:0 8px 16px #00000080}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1000;color:#e2e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:#0006;animation:fadeIn .2s ease-out}.modal-content{background:#0b2447;padding:30px;width:65%;max-width:900px;max-height:90vh;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 0 30px #000c;border:2px solid #64FFDA;animation:scaleIn .3s ease-out;display:flex;flex-direction:column}.close-button,.logout-button{position:absolute;right:20px;top:20px;background:none;border:none;font-size:26px;cursor:pointer;color:#94a3b8;transition:color .3s ease,transform .3s ease;font-weight:500;padding:5px;line-height:1;z-index:10}.close-button:hover,.logout-button:hover{color:#e74c3c!important;transform:rotate(90deg)}.user-info .logout-button{position:static;margin-left:15px;background:none;border:none;font-size:1rem;color:#94a3b8}.modal-title{font-family:Montserrat,sans-serif;text-align:center;margin-bottom:25px;color:#64ffda;font-size:2.2rem;font-weight:600;text-shadow:0 0 10px rgba(100,255,218,.5)}.current-user-coins{font-size:1rem;text-align:left;margin-bottom:15px;color:#fff;align-self:flex-start;font-weight:500}.modal-nav{display:flex;justify-content:center;gap:15px;margin-bottom:25px}.nav-button{padding:10px 20px;border:none;background:#0b2447;cursor:pointer;border-radius:8px;color:#e2e8f0;font-weight:600;transition:background .3s ease,color .3s ease;box-shadow:0 2px 5px #0003}.nav-button.active{background:#64ffda;color:#0a192f;box-shadow:0 0 10px #64ffdacc}.nav-button:hover:not(.active){background:#1c395b}.cosmeticos-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px;flex-grow:1;overflow-y:auto;padding:15px;background-color:#0b2447;border-radius:10px;box-shadow:inset 0 0 8px #0000004d;margin-bottom:0;justify-content:center}.cosmetico-item{background:#1c395b;border:1px solid rgba(100,255,218,.4);border-radius:10px;padding:15px;text-align:center;box-shadow:0 2px 8px #0000004d;transition:transform .2s ease,box-shadow .2s ease}.cosmetico-item:hover{transform:translateY(-3px);box-shadow:0 5px 12px #0006}.cosmetico-img{width:85%;height:100px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 0 4px rgba(255,255,255,.1))}.cosmetico-item p{margin-bottom:8px;color:#dde7f0;font-size:1rem;font-weight:400}.cosmetico-item button{background-color:#64ffda;color:#0a192f;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:600;transition:background .3s ease,transform .2s ease,color .3s ease;box-shadow:0 2px 4px #0003}.cosmetico-item button:hover{background-color:#ccfff3;color:#0a192f;transform:translateY(-1px)}.seleccionado-texto{color:#64ffda;font-weight:700;margin-top:15px;font-size:1rem}.agotado-text{color:#94a3b8;font-weight:700;margin-top:15px;font-size:1rem}.mensaje-error{color:#e74c3c;text-align:center;opacity:0;padding:0;margin:0;transition:opacity 1s ease-out,padding 1s ease-out,margin 1s ease-out}.mensaje-error.show{opacity:1;padding:10px;margin:10px 0}.user-info{position:relative;display:flex;align-items:center;gap:10px}.user-header{display:flex;align-items:center;cursor:pointer;padding:5px 10px;border-radius:8px;transition:background-color .3s ease}.user-header:hover{background-color:#5c7b7c33}.user-photo{width:40px;height:40px;border-radius:50%;margin-right:10px;border:2px solid #64FFDA}.user-name{font-weight:700;color:#64ffda}.user-menu{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#0b2447;border:1px solid #5C7B7C;border-radius:8px;box-shadow:0 4px 15px #00000080;padding:15px;min-width:200px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:999;margin-top:10px}.user-photo-large{width:80px;height:80px;border-radius:50%;border:3px solid #64FFDA;margin-bottom:10px}.user-name-large{font-size:1.2em;font-weight:700;color:#64ffda;text-align:center}.user-coins,.user-score{font-size:.95em;color:#ccc;text-align:center;margin:0}.delete-button{background-color:#ff6b6b;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer;font-size:.9em;transition:background-color .3s ease;margin-top:10px}.delete-button:hover{background-color:#ff4f4f}.googleBtn{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-weight:500;background-color:#fff;color:#000!important;border:1px solid #D1D1D1;padding:.7rem 1.4rem;border-radius:8px;box-shadow:0 3px 6px #0000001a;font-size:1rem;transition:all .3s ease}.googleBtn:hover{background-color:#f0f0f0;box-shadow:0 4px 8px #0003}.googleBtn img{width:20px;height:20px}.leaderboard-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .2s ease-out}.leaderboard-content{background:#0b2447;color:#e2e8f0;padding:30px;position:relative;border-radius:12px;max-width:600px;max-height:90vh;overflow:hidden;box-shadow:0 0 30px #000c;border:2px solid #64FFDA;animation:scaleIn .3s ease-out;display:flex;flex-direction:column}.leaderboard-list{list-style:none;margin-top:25px;background-color:#0b2447;border-radius:10px;padding:15px;box-shadow:inset 0 0 8px #0000004d;flex-grow:1;overflow-y:auto;margin-bottom:0}.leaderboard-list li{margin:10px 0;font-size:1.1rem;padding:8px 12px;border-bottom:1px solid rgba(94,116,124,.3);display:flex;justify-content:space-between;align-items:center;background-color:#0000000d;border-radius:6px;transition:background-color .2s ease}.leaderboard-list li:hover{background-color:#64ffda14}.leaderboard-list li:last-child{border-bottom:none}.leaderboard-list li:nth-child(1){color:#cfb53b;font-weight:700}.leaderboard-list li:nth-child(2){color:#a7a7a7;font-weight:700}.leaderboard-list li:nth-child(3){color:#b3672d;font-weight:700}.current-user-score{margin-top:25px;font-size:1rem;color:#fff;text-align:center;padding-top:15px;border-top:1px solid rgba(94,116,124,.4);font-weight:500}.cosmeticos-list::-webkit-scrollbar,.leaderboard-list::-webkit-scrollbar{width:10px}.cosmeticos-list::-webkit-scrollbar-track,.leaderboard-list::-webkit-scrollbar-track{background:#0b2447;border-radius:10px}.cosmeticos-list::-webkit-scrollbar-thumb,.leaderboard-list::-webkit-scrollbar-thumb{background:#64ffda;border-radius:10px;transition:background .3s ease}.cosmeticos-list::-webkit-scrollbar-thumb:hover,.leaderboard-list::-webkit-scrollbar-thumb:hover{background:#ccfff3}.navbar-title,.footer-title,.user-name-large,h1,h2,h3{font-family:"Press Start 2P"!important}.contact-content-wrapper{display:flex;flex-wrap:wrap;gap:40px;max-width:900px;width:100%;padding:40px 50px;background-color:#0b2447;border-radius:12px;box-shadow:0 0 15px #00000080;border:1px solid rgba(92,123,124,.4)}.contact-info-left,.contact-form-right{flex:1;min-width:300px;padding:20px;box-sizing:border-box}.contact-info-left h2,.contact-form-right h2{font-size:2.2em;color:#64ffda;text-shadow:0 0 8px rgba(100,255,218,.4);margin-bottom:20px;text-align:center}.contact-info-left p{font-size:1.1em;line-height:1.6;margin-bottom:15px;color:#ccc}.contact-email{font-size:1.3em;font-weight:700;color:#64ffda;text-shadow:0 0 8px rgba(100,255,218,.4);text-align:center;margin:25px 0;word-break:break-all;transition:color .3s ease,text-shadow .3s ease;text-decoration:none}.contact-form .form-group{margin-bottom:20px}.contact-form label{display:block;margin-bottom:8px;font-weight:700;color:#ccc}.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{width:100%;padding:12px;border:1px solid #555;border-radius:5px;background-color:#0a192f;color:#eee;font-size:1em;box-sizing:border-box;font-family:Open Sans,sans-serif}.contact-form input[type=text]:focus,.contact-form input[type=email]:focus,.contact-form textarea:focus{outline:none;border-color:#64ffda;box-shadow:0 0 8px #64ffda66}.contact-form textarea{resize:vertical}.modal-content.success h3{color:#009b08}.modal-content.error h3{color:#e74c3c}.modal-content.error{border:2px solid #E74C3C}.modal-content.success{border:2px solid #009b08}.legal-container h1,.legal-container h2{font-family:Open Sans,sans-serif!important;font-weight:700}.legal-container a{color:#fff}@media (max-width: 768px){.navbar{flex-direction:column;align-items:flex-start;padding:1rem;box-shadow:0 2px 8px #00000080}.navbar-title{font-size:1.8rem;margin-bottom:.8rem;align-self:center}.navbar-links{flex-direction:column;gap:.8rem;width:100%;align-items:center}.navbar-links li{width:100%;text-align:center;display:flex;justify-content:center;align-items:center}.column-left,.column-right{display:none}.navbar-links li .link-button,.footer-links li .link-button,.googleBtn{font-size:.95rem;padding:.6rem 1.2rem;width:90%;max-width:250px}.main-content{padding:2rem 1rem}.footer{flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1rem;gap:1.5rem}.footer-title{font-size:2rem;margin-bottom:.5rem;align-self:center}.footer-links{flex-direction:column;align-items:center;gap:.8rem;width:100%}.footer-links li{width:auto}.footer-social{align-items:center;margin-bottom:1.5rem}.social-title,.legal-title{font-size:1.1rem;margin-bottom:.8rem}.social-icons{justify-content:center;gap:10px}.social-icon{width:28px;height:28px}.footer-legal{flex-direction:column;align-items:center;gap:.8rem;width:100%;margin-bottom:1.5rem}.footer-legal a{font-size:.9rem;padding:.4rem .8rem}.copyright-notice{font-size:.8rem;margin-top:1rem;text-align:center;width:100%}.modal-overlay{padding:1rem}.modal-content{width:95%;max-width:500px;padding:1.5rem 1rem;max-height:85vh}.close-button{font-size:1.8rem;right:10px;top:10px}.modal-title{font-size:1.8rem;margin-bottom:1rem;word-wrap:break-word;overflow-wrap:break-word}.leaderboard-list,.cosmeticos-list,.personalizacion-list{font-size:.9rem}.leaderboard-item,.cosmetico-item,.personalizacion-item{padding:8px 12px}.buy-button,.select-button{font-size:.8rem;padding:6px 10px;margin:8px 0}.current-user-score{margin-top:15px;font-size:.9rem;padding-top:10px}.cosmeticos-list::-webkit-scrollbar,.leaderboard-list::-webkit-scrollbar,.personalizacion-list::-webkit-scrollbar{width:6px}.cosmeticos-list::-webkit-scrollbar-thumb,.leaderboard-list::-webkit-scrollbar-thumb,.personalizacion-list::-webkit-scrollbar-thumb{border-radius:3px}.mensaje-error{margin:8px 0;padding:8px;font-size:.9rem}.contact-page-container{padding:2rem 1rem}.contact-content-wrapper{flex-direction:column;padding:20px;gap:20px}.contact-info-left,.contact-form-right{padding:10px;min-width:unset;width:100%}.contact-info-left h2,.contact-form-right h2{font-size:1.8em}.contact-info-left p{font-size:.95em}.contact-email{font-size:1.1em;margin:15px 0}.contact-form label{font-size:.9em}.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{padding:10px;font-size:.9em}.contact-form textarea{min-height:100px}.contact-form button{padding:10px 20px;font-size:1em}}