*{margin:0;padding:0;box-sizing:border-box}body{font-family:Verdana,Arial,sans-serif;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;transition:background-image .3s ease-in-out;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px,#eee,transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 90px 40px,#fff,transparent),radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,.6),transparent),radial-gradient(2px 2px at 160px 30px,#fff,transparent),radial-gradient(1px 1px at 200px 90px,rgba(255,255,255,.7),transparent),radial-gradient(2px 2px at 240px 50px,#eee,transparent),radial-gradient(1px 1px at 280px 10px,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 320px 70px,#fff,transparent),radial-gradient(2px 2px at 360px 40px,rgba(255,255,255,.8),transparent);background-repeat:repeat;background-size:400px 200px;animation:twinkle 4s infinite ease-in-out alternate;pointer-events:none;z-index:0}@keyframes twinkle{0%{opacity:.3}50%{opacity:.8}to{opacity:.3}}body:after{content:"";position:fixed;bottom:15%;right:20%;width:80px;height:80px;background:radial-gradient(circle at 20% 30%,#d3d3d3 0%,#c0c0c0 30%,#a8a8a8 50%,#808080 70%,transparent 75%);border-radius:50%;box-shadow:inset 20px 0 30px #0009,0 0 20px #fff3,0 0 40px #ffffff26,0 0 60px #ffffff1a;animation:moonGlow 8s infinite ease-in-out alternate;pointer-events:none;z-index:0}body.background-image-loaded:before,body.background-image-loaded:after{display:none}z-index: 0; } @keyframes moonGlow{0%{opacity:.5;box-shadow:inset 20px 0 30px #0009,0 0 20px #fff3,0 0 40px #ffffff26,0 0 60px #ffffff1a}100%{opacity:.8;box-shadow:inset 20px 0 30px #00000080,0 0 30px #ffffff4d,0 0 50px #fff3,0 0 80px #ffffff26}}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100vh;padding:10px}#viewport{position:fixed;top:0;left:0;width:100vw!important;height:100vh!important;border:none;border-radius:0;box-shadow:none;background:transparent;display:block;z-index:1;aspect-ratio:unset!important;max-width:100vw!important;max-height:100vh!important;image-rendering:auto;image-rendering:smooth;-ms-interpolation-mode:bicubic;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}@media screen and (max-width:768px){#viewport{width:100vw!important;height:100vh!important}}@media screen and (max-width:480px){#viewport{width:100vw!important;height:100vh!important}}@media screen and (max-height:500px)and (orientation:landscape){#viewport{width:100vw!important;height:100vh!important}}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-resolution:192dpi){#viewport{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}.loading{color:#fff;font-size:1.1rem;text-align:center;margin-top:10px}@media(hover:none)and (pointer:coarse){#viewport{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}}.canvas-wrapper{display:flex;justify-content:center;align-items:center;width:100%;flex:1;min-height:0;position:relative}