@import"https://fonts.googleapis.com/css2?family=Bonheur+Royale&display=swap";*{box-sizing:border-box;margin:0;padding:0}.game-character{width:100px;height:100px;position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center}#character{left:20px;top:-20px}#enemy-div{right:-100px;bottom:110px;background-size:cover}#normal-character{right:-100px;bottom:110px}#reward-character{right:-100px;bottom:110px;background-size:cover}.rotate{transform:rotateY(-180deg)}#platform{width:100%;height:120px;position:fixed;bottom:0;display:flex}#platform div{height:100%}#platform div:first-child{width:100px;background-image:url(/image/tile/1.png)}#platform div:last-child{width:100px;background-image:url(/image/tile/3.png)}#platform div:nth-child(2){flex-grow:1;background-image:url(/image/tile/2.png)}body{overflow:hidden}.change-opacity{animation:background-change-animation 3s forwards}@keyframes background-change-animation{0%{opacity:0}to{opacity:1}}#start-button-container{position:fixed;top:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100vh}#start-button{width:110px;height:70px;border:none;background-image:url(/image/button/start-play-button.png);background-position-x:-50px;background-position-y:-27px;background-size:210px;border-radius:5px;animation:pulse-animation .5s infinite}@keyframes pulse-animation{0%{box-shadow:0 0 12px 5px red}to{box-shadow:0 0 13px 20px red}}#game-name-container{width:100%;height:192px;display:flex;justify-content:center}#game-name-div{z-index:1;width:60%;height:100%;display:flex;align-items:center}#game-name-div div{height:100%}#game-name-div div:first-child{width:144px;background-image:url(/image/banner/Banner_Connection_Left.png)}#game-name-div div:nth-child(2){background-image:url(/image/banner/Carved_3Slides.png);background-repeat:no-repeat;flex-grow:1;background-size:600px;background-position-x:-20px;display:flex;align-items:center;height:60%}#game-name-div div:last-child{width:144px;background-image:url(/image/banner/Banner_Connection_Right.png);background-position:right}#game-name-span{height:100%;width:100%;color:#00f;font-family:Bonheur Royale,cursive;font-weight:400;font-size:8vw;display:flex;align-items:center;justify-content:center}#overlay{position:fixed;top:0;width:100vw;height:100vh;background-color:#000c;background-image:url(/image/treasure-map.png);background-size:contain;background-repeat:no-repeat;background-position:center;z-index:2;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;font-family:system-ui,"sans-serif";gap:25px}#overlay h1{text-shadow:0 0 10px #51cbaf}#overlay #progress-bar{width:90%;height:10px;background-color:#858585;border-radius:10px;box-shadow:0 0 8px 2px #fff}#overlay #progress-bar #bar{width:0;height:100%;background-color:#fff;border-radius:10px;transition:width 1s}.hide{animation:fade .75s forwards}@keyframes fade{0%{transform:scaleY(1)}to{transform:scaleY(0)}}#game-over-banner{background-image:url(/image/game-over-banner.jpg)}.win-lose-banner{position:fixed;top:0;background-size:cover;background-position:center;background-repeat:no-repeat;width:100%;height:100%;transform:scaleX(0);z-index:3}#you-won-banner{background-image:url(/image/you-won-banner.jpg)}.appear-and-expand{visibility:visible;animation:expand .75s forwards}@keyframes expand{0%{transform:scaleX(0)}to{transform:scaleX(1)}}#treasure-chest-div{width:160px;height:150px;position:absolute;bottom:120px;right:50px;background-image:url(/image/treasure-chest.png);background-size:contain;background-position:center;display:none}#score-div{width:100%;height:100px;position:absolute;top:80px;display:flex;align-items:center;justify-content:center}#score-div #score-span{width:60%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5vw;font-family:Bonheur Royale,cursive}#start-screen{position:fixed;left:0;top:0;right:0;bottom:0;background-color:#0d0565;display:flex;justify-content:center;align-items:center;z-index:2;flex-direction:column;gap:10px}#start-screen button{padding:10px 20px;font-size:2rem;font-weight:700;font-family:system-ui,sans-serif;border-radius:10px;background-color:#fff;border:none;box-shadow:0 0 4px 2px #fff;cursor:pointer}#start-screen button:hover{box-shadow:0 0 4px 4px #fff}#start-screen button:active{box-shadow:0 0 4px 4px #fff,inset 0 0 5px 3px #8a8a8a}#start-screen h2{font-family:system-ui,sans-serif;color:#fff;margin-bottom:20px;text-align:center;font-size:1.8rem}#start-screen h2 span{font-size:3rem;vertical-align:sub;color:#7cfc00;text-shadow:1px 1px 9px #7aff01}#start-screen #footer{color:#fff;font-family:system-ui,sans-serif;margin-top:40px;font-size:small}#restart-screen{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:3;flex-direction:column;gap:20px;display:none}#restart-screen button{padding:10px 20px;font-size:2rem;font-weight:700;font-family:system-ui,sans-serif;border-radius:10px;background-color:#fff;border:none;box-shadow:0 0 4px 2px #fff;cursor:pointer;opacity:.7}#restart-screen button:hover{box-shadow:0 0 4px 4px #fff}#restart-screen button:active{box-shadow:0 0 4px 4px #fff,inset 0 0 5px 3px #8a8a8a}#restart-screen #exit-button{background-color:red;color:#fff}.reward{width:150px;height:150px;background-size:contain;position:absolute;top:40%;left:45%;visibility:hidden;transition:visibility .2s}#gift-div{background-image:url(/image/gift.png)}#cross-div{background-image:url(/image/cross.png)}#final-score-div{width:100%;height:100px;position:absolute;bottom:0;display:flex;align-items:center;justify-content:center}#final-score-div #final-score-span{font-family:Bonheur Royale,cursive;color:#fff;font-weight:800;font-size:6vw;z-index:4;visibility:hidden}#background-div{position:fixed;left:0;top:0;right:0;bottom:0;background-image:url(/image/BG.png);background-size:cover;background-repeat:no-repeat;background-position:top center;overflow:hidden}