:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100vh;margin:0;padding:0}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000;padding:20px}.modal-content{background:#fff;border-radius:12px;padding:30px;max-width:400px;width:100%;position:relative;animation:slideUp .3s ease-out;box-shadow:0 10px 40px #0000004d}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:32px;cursor:pointer;color:#999;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;transition:color .2s}.modal-close:hover{color:#333}.modal-content h2{margin:0 0 10px;color:#333;font-family:Fredoka One,Arial,sans-serif;font-size:28px;text-align:center}.modal-subtitle{color:#666;margin:0 0 25px;text-align:center;font-family:Nunito,Arial,sans-serif;font-size:16px}.form-group{margin-bottom:15px}.form-group input{width:100%;padding:12px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;font-family:Nunito,Arial,sans-serif;transition:border-color .3s;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#6733c9}.form-group input:disabled{background:#f5f5f5;cursor:not-allowed}.form-group input.error-input{border-color:#e57373;background-color:#ffebee}.form-group input.error-input:focus{border-color:#f44336;box-shadow:0 0 0 2px #f4433633}.field-error{background:#ffebee;color:#c62828;padding:6px 10px;border-radius:4px;margin-top:5px;font-size:12px;font-family:Nunito,Arial,sans-serif;border-left:3px solid #f44336}.error-message{background:#ffebee;color:#c62828;padding:10px;border-radius:6px;margin-bottom:15px;font-size:14px;font-family:Nunito,Arial,sans-serif;text-align:center}.submit-button{width:100%;padding:14px;background:#6733c9;color:#fff;border:none;border-radius:8px;font-size:18px;font-family:Fredoka One,Arial,sans-serif;cursor:pointer;transition:background .3s;border:2px solid #4a1a7a;box-shadow:0 3px #4a1a7a}.submit-button:hover:not(:disabled){background:#8652e6}.submit-button:disabled{background:#999;border-color:#777;box-shadow:0 3px #777;cursor:not-allowed}.success-message{text-align:center;padding:20px 0}.success-message h2{color:#4caf50;margin-bottom:15px}.success-message p{color:#666;font-family:Nunito,Arial,sans-serif;font-size:16px;margin:5px 0}@media (max-width: 480px){.modal-content{padding:20px}.modal-content h2{font-size:24px}.form-group input{font-size:16px}}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100vh;height:calc(var(--vh, 1vh) * 100);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding:0;margin:0;position:fixed;top:0;left:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.app{width:100%;height:100vh;height:calc(var(--vh, 1vh) * 100);height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(var(--vh, 1vh) * 100 - env(safe-area-inset-top) - env(safe-area-inset-bottom));background:url(/assets/sky-gyx0Yuqd.png) center/cover;display:flex;justify-content:center;align-items:center;box-sizing:border-box;padding:20px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}#game-container{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box}#game-container canvas{display:block;margin:0 auto}@media (orientation: landscape){#game-container{max-height:90vh}}@media (max-width: 480px){#game-container{max-width:100%}}@media (min-height: 800px){#game-container{max-height:700px}}@media screen and (max-height: 900px){.app{padding:10px}}@media screen and (max-height: 800px){.app{padding:5px}}@media screen and (max-height: 750px){.app{padding:5px 5px 60px}}@media screen and (orientation: landscape){.app{padding:10px 40px}}
