@font-face{font-family:Pixel;src:url(/assets/font/pixel.ttf) format("truetype")}:root{font-family:Pixel,system-ui,Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-smooth:never}body{margin:0;padding:0;overflow:hidden;background:linear-gradient(to bottom,#b0d5df,#dfecd5);width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}#app{width:800px;height:600px;position:relative;overflow:hidden;background:linear-gradient(to bottom,#b0d5df,#dfecd5);box-shadow:0 0 20px #0003;image-rendering:pixelated;image-rendering:crisp-edges}img{image-rendering:pixelated;image-rendering:crisp-edges;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.cloud{position:absolute;pointer-events:none}.grass-rect{position:absolute;z-index:20}#title{position:absolute;top:50px;left:50%;transform:translate(-50%);width:400px;height:200px;z-index:30}#start-btn{position:absolute;top:310px;left:50%;transform:translate(-50%);background:none;border:none;color:#55371d;font-size:30px;font-weight:400;cursor:pointer;z-index:40;font-family:Pixel;transition:opacity .2s ease-in-out}.mode-btn{position:absolute;left:50%;transform:translate(-50%);background:none;border:none;color:#55371d;font-size:30px;font-weight:400;cursor:pointer;z-index:40;font-family:Pixel;transition:opacity .2s ease-in-out;opacity:0}.mode-btn.visible{opacity:1}.icon-btn{position:absolute;top:35px;width:30px;height:30px;border:none;background-color:transparent;cursor:pointer;z-index:40;padding:0;display:flex;justify-content:center;align-items:center}#login-btn{right:150px}#settings-btn{right:80px}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:20px;max-height:300px;overflow-y:auto}.level-item{background:#f0d0a0;border:2px solid #55371d;color:#55371d;padding:10px;text-align:center;cursor:pointer;font-family:Pixel;font-size:18px}.level-item:hover{background:#e0b080}canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:100;image-rendering:pixelated;image-rendering:crisp-edges}.game-ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:110;font-family:Pixel;color:#55371d;image-rendering:pixelated;image-rendering:crisp-edges}.game-ui-overlay *{pointer-events:auto}.ui-stats{position:absolute;top:40px;left:40px;font-size:20px;line-height:1.5}.ui-stats div:first-child{font-size:25px;margin-bottom:10px}.ui-top-icons{position:absolute;top:35px;right:40px;display:flex;gap:20px}.ui-top-icons img{width:30px;height:30px;cursor:pointer}.ui-item-bar{position:absolute;bottom:35px;left:30px;display:flex;gap:10px;background:url(/assets/images/items.png) no-repeat;background-size:190px 70px;width:190px;height:70px;padding:15px 10px;box-sizing:border-box;overflow:visible}.item-group{display:flex;flex-direction:column;align-items:center;width:50px;position:relative}.item-group img{width:40px;height:40px;cursor:pointer}.item-group div{position:absolute;font-size:23px;color:#55371d;bottom:-35px;right:-6px;font-family:Pixel;pointer-events:none;white-space:nowrap}.ui-directions{position:absolute;bottom:40px;right:40px;display:grid;grid-template-areas:". up ." "left down right";gap:5px}.ui-directions img{width:40px;height:40px;cursor:pointer}.dir-up{grid-area:up}.dir-left{grid-area:left}.dir-down{grid-area:down}.dir-right{grid-area:right}.shortcut-hint{position:absolute;bottom:-25px;right:0;font-size:12px;white-space:nowrap}#theme-btn{right:220px}#box{position:absolute;width:50px;height:50px;cursor:grab;z-index:15}#cat{position:absolute;width:50px;height:50px;z-index:14}.dialog-shade{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:100}.dialog-paper{position:absolute;top:50px;left:150px;width:500px;height:500px;background-image:url(/assets/images/paper.png);background-size:100% 100%;z-index:101;display:flex;flex-direction:column;align-items:center;padding-top:80px;box-sizing:border-box;color:#55371d}.dialog-title{font-size:45px;margin-bottom:30px}.dialog-close{position:absolute;top:10px;right:20px;width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0}.dialog-close img{width:100%;height:100%}.settings-vbox{display:flex;flex-direction:column;gap:20px;width:340px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.settings-row label{font-size:20px}.settings-row input[type=range]{flex:1}.settings-row input[type=text]{width:100px;background:#55371d;color:#f2f2f2;border:none;font-family:Pixel;font-size:20px;text-align:center}.theme-list{display:flex;flex-direction:column;gap:15px}.theme-option{display:flex;align-items:center;gap:15px;font-size:24px;cursor:pointer;font-family:Pixel}.theme-option input[type=radio]{appearance:none;width:16px;height:16px;border:2px solid currentColor;border-radius:50%;outline:none;cursor:pointer;position:relative}.theme-option input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:currentColor;border-radius:50%}.win-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s}.win-overlay.show{opacity:1}.win-content{width:100%;display:flex;flex-direction:column;align-items:center;transform:translate(-100%);transition:transform .15s cubic-bezier(.25,.1,.25,1)}.win-overlay.show .win-content{transform:translate(0)}.win-overlay.exit .win-content{transform:translate(100%)}.win-line{width:100%;height:8px;background-color:#fff}.win-text{font-size:90px;color:#fff;margin:10px 0;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.win-stars{font-size:36px;color:#f0c864;margin:5px 0;letter-spacing:8px;text-shadow:1px 1px 3px rgba(0,0,0,.4)}.lose-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;opacity:0;transition:opacity .4s ease;pointer-events:none}.lose-overlay.show{opacity:1}.fade-in-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:2000;pointer-events:none;opacity:1;transition:opacity 1s ease-out}.fade-in-overlay.hide{opacity:0}.lose-content{display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .8s ease}.lose-overlay.show-text .lose-content{opacity:1}.lose-text{font-size:90px;color:#fff;font-family:Pixel}.lose-subtext{font-size:30px;color:#fff;margin-top:10px;font-family:Pixel}.settings-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.settings-paper{background:url(/assets/images/paper.png) no-repeat center;background-size:contain;width:500px;height:500px;display:flex;flex-direction:column;align-items:center;padding-top:80px;box-sizing:border-box}.settings-title{font-size:45px;color:#55371d;margin-bottom:30px}.settings-content{width:300px;display:flex;flex-direction:column;gap:20px}.settings-close{margin-top:40px;background:transparent;border:2px solid #55371d;color:#55371d;font-family:Pixel;font-size:20px;cursor:pointer;padding:5px 20px}.settings-vbox{display:flex;flex-direction:column;gap:15px;width:350px}.settings-row{display:flex;justify-content:space-between;align-items:center;font-size:18px;color:#55371d}.settings-row input[type=text]{width:100px;font-family:Pixel;border:1px solid #55371d;background:#ffffff80;padding:2px 5px}.settings-row button{font-family:Pixel;background:#f0d0a0;border:2px solid #55371d;color:#55371d;padding:5px 10px;cursor:pointer}.settings-row button:hover{background:#e0b080}.settings-section-title{font-size:20px;color:#55371d;border-bottom:1px solid #55371d;padding-bottom:5px;margin-bottom:5px}