body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea,#764ba2);color:#333;font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;line-height:1.6;overflow-x:hidden}.container{margin:0 auto;max-width:1200px;padding:0 20px}.hero{align-items:center;display:flex;min-height:100vh;overflow:hidden;position:relative}.hero:before{animation:pixelMove 20s linear infinite;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ff6b6b' opacity='.1' d='M0 0h10v10H0z'/%3E%3Cpath fill='%234ecdc4' opacity='.1' d='M10 10h10v10H10z'/%3E%3Cpath fill='%23ffe66d' opacity='.1' d='M20 20h10v10H20z'/%3E%3Cpath fill='%23a8e6cf' opacity='.1' d='M30 30h10v10H30z'/%3E%3C/svg%3E") repeat;bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes pixelMove{0%{transform:translateX(0) translateY(0)}to{transform:translateX(-100px) translateY(-100px)}}.hero-content{color:#fff;position:relative;text-align:center;z-index:2}.hero h1{-webkit-text-fill-color:#0000;animation:gradientShift 3s ease-in-out infinite alternate;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#ffe66d);-webkit-background-clip:text;font-size:clamp(3rem,8vw,6rem);font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 4px #0000004d}@keyframes gradientShift{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(20deg)}}.hero p{font-size:1.3rem;margin-bottom:2rem;opacity:.9}.cta-button{background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border:none;border-radius:50px;box-shadow:0 8px 20px #0003;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;overflow:hidden;padding:15px 40px;position:relative;text-decoration:none;transition:all .3s ease}.cta-button:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.cta-button:hover:before{left:100%}.cta-button:hover{box-shadow:0 12px 25px #0000004d;transform:translateY(-3px)}.features{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:100px 0;position:relative}.features:before{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-clip-path:polygon(0 0,100% 0,100% 70%,0 100%);clip-path:polygon(0 0,100% 0,100% 70%,0 100%);content:"";height:100px;left:0;position:absolute;right:0;top:0}.section-title{color:#333;font-size:2.5rem;margin-bottom:3rem;position:relative;text-align:center}.section-title:after{background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border-radius:2px;content:"";display:block;height:4px;margin:1rem auto;width:80px}.features-grid{grid-gap:2.5rem 3rem;display:grid;gap:2.5rem 3rem;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(2,auto);justify-content:center;margin-top:4rem}.feature-card{background:#fff;border-radius:20px;box-shadow:0 10px 30px #0000001a;min-height:220px;padding:2rem;position:relative;transition:all .3s ease;width:320px}.feature-card:before{background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#ffe66d);content:"";height:4px;left:0;position:absolute;right:0;top:0}.feature-card:hover{box-shadow:0 20px 40px #00000026;transform:translateY(-10px)}.feature-icon{align-items:center;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border-radius:50%;color:#fff;display:flex;font-size:1.5rem;height:60px;justify-content:center;margin-bottom:1rem;width:60px}.feature-card h3{color:#333;font-size:1.3rem;margin-bottom:1rem}.feature-card p{color:#666;line-height:1.6}@media (max-width:900px){.features-grid{grid-template-columns:1fr;grid-template-rows:none;justify-items:center}.feature-card{min-width:0;min-width:auto;width:90vw}}.how-it-works{background:#fff;padding:100px 0}.steps{align-items:stretch;display:flex;flex-direction:row;gap:3rem;justify-content:center;margin-top:4rem}.step{flex:1 1;flex-direction:column;margin:0 10px;max-width:280px;min-width:200px;padding-bottom:30px;text-align:center}.step,.step-number{align-items:center;display:flex;position:relative}.step-number{background:linear-gradient(45deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 4px 16px #aaa2;color:#fff;font-size:2.1rem;font-weight:700;height:80px;justify-content:center;margin:0 auto 1.2rem;width:80px;z-index:2}.step h3{font-size:1.18rem;font-weight:700;letter-spacing:.02em;margin:0 0 1rem}.step h3,.step p{text-align:center}.step p{color:#555;font-size:1rem;line-height:1.9;margin:0 auto;max-width:200px;word-break:break-word}@media(max-width:900px){.steps{flex-direction:column;gap:2rem}.step{margin:0 auto;max-width:360px}}.pricing{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;padding:100px 0}.pricing-cards{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;gap:1.5rem;justify-content:center;margin-top:4rem;width:100%}.pricing-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;display:flex;flex-direction:column;flex-shrink:1;max-width:360px;min-width:320px;padding:1.8rem;text-align:center;transition:all .3s ease;width:320px}.pricing-card:hover{background:#ffffff26;transform:translateY(-10px)}.pricing-card.featured{border-color:#fff;box-shadow:0 0 20px #ffffff4d}.pricing-card .features-list{flex-grow:1;list-style:none;margin:2rem 0}.pricing-card .features-list li{border-bottom:1px solid #ffffff1a;padding:.5rem 0}.pricing-card .features-list li:last-child{border-bottom:none}.pricing-card .cta-button{margin-top:auto}.price{align-items:baseline;display:flex;font-size:2.7rem;font-weight:700;gap:.2rem;justify-content:center;margin:1rem 0}.price-period{font-size:1rem;opacity:.8}@media(max-width:1400px){.pricing-cards{gap:1rem}.pricing-card{min-width:220px;padding:1.3rem;width:250px}}@media(max-width:1200px){.pricing-cards{gap:.8rem}.pricing-card{min-width:200px;padding:1.2rem;width:220px}.price{font-size:2.3rem}}@media(max-width:1024px){.pricing-cards{flex-wrap:wrap;justify-content:center}.pricing-card{margin-bottom:1rem;min-width:280px;width:45%}}@media(max-width:768px){.pricing-cards{align-items:center;flex-direction:column}.pricing-card{max-width:400px;min-width:280px;width:90vw}}.final-cta{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:100px 0;text-align:center}.final-cta h2{font-size:2.5rem;margin-bottom:1rem}.final-cta p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.pixel-demo{grid-gap:1px;background:#333;border-radius:10px;display:grid;gap:1px;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(10,1fr);height:200px;margin:2rem auto;overflow:hidden;width:300px}.pixel{background:#f0f0f0;cursor:pointer;transition:all .3s ease}.pixel:hover{transform:scale(1.1)}.modal{animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#000c;display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal.show{align-items:center;display:flex;justify-content:center}.modal-content{animation:slideIn .3s ease;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;box-shadow:0 20px 60px #0000004d;margin:auto;max-width:450px;overflow:hidden;padding:0;position:relative;width:90%}@keyframes slideIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.modal-header{align-items:center;background:#ffffff1a;border-bottom:1px solid #fff3;display:flex;justify-content:space-between;padding:20px}.modal-title{font-size:1.5rem;margin:0}.close,.modal-title{color:#fff;font-weight:700}.close{cursor:pointer;font-size:28px;transition:opacity .3s ease}.close:hover{opacity:.7}.modal-body{color:#fff;padding:30px}.form-group{margin-bottom:20px}.form-group label{color:#ffffffe6;display:block;margin-bottom:8px}.form-group input{background:#ffffff1a;border:2px solid #ffffff4d;border-radius:10px;color:#fff;font-size:16px;padding:12px;transition:all .3s ease;width:100%}.form-group input::placeholder{color:#ffffffb3}.form-group input:focus{border-color:#4ecdc4;box-shadow:0 0 0 3px #4ecdc44d;outline:none}.auth-button{border:none;border-radius:10px;cursor:pointer;font-size:16px;font-weight:700;margin:10px 0;overflow:hidden;padding:15px;position:relative;transition:all .3s ease;width:100%}.auth-button:hover{box-shadow:0 8px 20px #0003;transform:translateY(-2px)}.auth-button:active{transform:translateY(0)}.email-auth-button{background:linear-gradient(45deg,#ff6b6b,#4ecdc4);color:#fff}.google-auth-button{align-items:center;background:#fff;border:2px solid #ddd;color:#333;display:flex;gap:10px;justify-content:center}.google-auth-button:hover{background:#f8f9fa}.divider{align-items:center;display:flex;margin:25px 0}.divider:after,.divider:before{background:#ffffff4d;content:"";flex:1 1;height:1px}.divider span{color:#fffc;font-size:14px;padding:0 15px}.switch-auth{margin-top:20px;text-align:center}.switch-auth a{color:#4ecdc4;font-weight:700;text-decoration:none;transition:color .3s ease}.switch-auth a:hover{color:#ffe66d}.loading{opacity:.7;pointer-events:none}.error-message{background:#ff6b6b33;border:1px solid #ff6b6b;border-radius:8px;color:#ff6b6b;font-size:14px;margin-bottom:15px;padding:10px}@media(max-width:768px){.hero h1{font-size:3rem}.hero p{font-size:1.1rem}.features-grid,.steps{grid-template-columns:1fr}.step:before{display:none}.pricing-cards{align-items:center;flex-direction:column}.pricing-card{max-width:400px;min-width:280px;width:90vw}.modal-content{margin:20px;width:95%}.modal-body{padding:20px}}.game-container{color:#fff;padding:2rem;text-align:center}.grid{grid-gap:0;display:grid;gap:0;justify-content:center;margin:2rem auto}.pixel-cell{background-color:#111;border:1px solid #222;cursor:pointer;height:20px;width:20px}.pixel-cell:hover{outline:1px solid #fff}.community-info{background-color:#222;border-radius:8px;margin-top:2rem;padding:1rem}.row{display:flex}body,html{height:100%;margin:0;overflow:auto;padding:0}.community-create-page{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:2rem 0;position:relative}.background-animation{bottom:0;left:0;position:absolute;right:0;top:0;z-index:0}.pixel-bg{animation:float 6s ease-in-out infinite;background:#ffffff1a;height:20px;position:absolute;width:20px}.pixel-bg:first-child{animation-delay:0s;background:#ff6b6b33;left:10%;top:20%}.pixel-bg:nth-child(2){animation-delay:2s;background:#4ecdc433;left:80%;top:70%}.pixel-bg:nth-child(3){animation-delay:4s;background:#ffe66d33;left:70%;top:30%}.pixel-bg:nth-child(4){animation-delay:1s;background:#a8e6cf33;left:20%;top:80%}.pixel-bg:nth-child(5){animation-delay:3s;background:#ffffff1a;left:50%;top:50%}@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(180deg)}}.container{max-width:600px;padding:0 2rem;position:relative;width:100%;z-index:1}.create-form-container{animation:slideInUp .8s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #fff3;border-radius:25px;box-shadow:0 20px 60px #0000004d;padding:3rem}@keyframes slideInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.form-header{margin-bottom:2rem;text-align:center}.form-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.form-header p{color:#666;font-size:1.1rem}.create-form{position:relative}.success-message{animation:bounceIn .6s ease-out;padding:2rem;text-align:center}.success-icon{animation:bounce 1s infinite;font-size:4rem;margin-bottom:1rem}.success-message h3{color:#4caf50;font-size:1.5rem;margin-bottom:.5rem}.success-message p{color:#666}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.error-message{align-items:center;animation:shake .5s ease-in-out;background:#f443361a;border:2px solid #f44336;border-radius:15px;color:#f44336;display:flex;gap:.5rem;margin-bottom:1.5rem;padding:1rem}.error-icon{font-size:1.2rem}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.form-content{animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.form-group{margin-bottom:2rem}.form-group label{align-items:center;color:#333;display:flex;font-size:1.1rem;font-weight:700;gap:.5rem;margin-bottom:.5rem}.label-icon{font-size:1.2rem}.form-input,.form-textarea{background:#fffc;border:2px solid #e0e0e0;border-radius:15px;font-size:1rem;padding:1rem;transition:all .3s ease;width:100%}.form-input:focus,.form-textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none;transform:translateY(-2px)}.form-textarea{font-family:inherit;min-height:120px;resize:vertical}.character-count{color:#888;font-size:.9rem;margin-top:.25rem;text-align:right}.form-actions{display:flex;flex-direction:column;gap:1rem}.back-button,.create-button{align-items:center;border:none;border-radius:15px;cursor:pointer;display:flex;font-size:1.1rem;font-weight:700;gap:.5rem;justify-content:center;overflow:hidden;padding:1rem 2rem;position:relative;transition:all .3s ease}.create-button{background:linear-gradient(45deg,#667eea,#764ba2);box-shadow:0 8px 20px #667eea4d;color:#fff}.create-button:hover:not(:disabled){box-shadow:0 12px 25px #667eea66;transform:translateY(-3px)}.create-button:disabled{cursor:not-allowed;opacity:.7}.back-button{background:#6c757d1a;border:2px solid #6c757d;color:#6c757d}.back-button:hover:not(:disabled){background:#6c757d;color:#fff;transform:translateY(-2px)}.button-icon{font-size:1.2rem}.loading-spinner{animation:spin 1s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:20px;width:20px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){.container{padding:0 1rem}.create-form-container{border-radius:20px;padding:2rem}.form-header h1{font-size:2rem}.form-actions{gap:.8rem}}@media (max-width:480px){.create-form-container{padding:1.5rem}.form-header h1{font-size:1.8rem}}
/*# sourceMappingURL=main.cc4cf6a2.css.map*/