body{margin:0;padding:0;overflow:hidden}canvas{display:block;touch-action:none}#UI{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:100;pointer-events:none}#panel_frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:9/16;z-index:100;pointer-events:none}#panel_loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:9/16;z-index:100;background-color:#fff}#loadingLogo{position:absolute;top:30%;left:50%;width:50%;transform:translate(-50%)}#loadingBar{position:absolute;top:50%;left:50%;width:50%;transform:translate(-50%)}#panel_audio{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:9/16;z-index:10}#audio_btn{position:absolute;top:.5%;right:1%;width:8%;pointer-events:auto}#panel_play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:9/16}#instruction{position:absolute;top:20%;left:50%;width:50%;transform:translate(-50%);display:none}#scoreFrame{position:absolute;top:4%;left:3%;width:30%}#scoreIcon{position:absolute;top:6.8%;left:4.8%;width:5%}#scoreText{position:absolute;top:6%;left:12%;width:18%;text-align:center;color:#343434;font-family:GameFont,sans-serif;pointer-events:none;-webkit-user-select:none;user-select:none}#liveFrame{position:absolute;top:4%;right:3%;width:30%}#liveIcon{position:absolute;top:6.8%;right:4.8%;width:5%}#liveText{position:absolute;top:6%;right:15%;width:10%;text-align:center;color:#343434;font-family:GameFont,sans-serif;pointer-events:none;-webkit-user-select:none;user-select:none}#timeBoard{position:absolute;top:10%;left:3%;width:30%}#timeFrame{position:absolute;top:50%;left:50%;transform:translate(-50%);width:100%}#timeText{position:absolute;left:57%;transform:translate(-50%,50%);width:100%;text-align:center;color:#343434;font-family:GameFont,sans-serif;pointer-events:none;-webkit-user-select:none;user-select:none}#panel_replay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:9/16;background-color:#000000bf}#replay_btn{position:absolute;bottom:20%;left:50%;width:33%;transform:translate(-50%)}#txt_replay{position:absolute;bottom:22%;left:50%;width:22%;transform:translate(-50%)}#shieldBtn{position:absolute;top:15%;right:3%;width:10%;cursor:pointer;transform-origin:center center}#shieldText{position:absolute;top:20.5%;right:3%;width:10%;text-align:center;color:#343434;font-family:GameFont,sans-serif;pointer-events:none;-webkit-user-select:none;user-select:none}#magnetBtn{position:absolute;top:25%;right:3%;width:10%;cursor:pointer;transform-origin:center center}#magnetText{position:absolute;top:30.75%;right:3%;width:10%;text-align:center;color:#343434;font-family:GameFont,sans-serif;pointer-events:none;-webkit-user-select:none;user-select:none}#panel_custom_instruction{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:9/16;background-color:#fff}#custom_instruction_bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%}#custom_instruction_btn{position:absolute;bottom:5%;left:50%;width:33%;transform:translate(-50%);pointer-events:auto}#sortable-list{list-style-type:none;padding:0}#sortable-list li{margin:10px;padding:10px;background-color:#f0f0f0;border:1px solid #ccc;cursor:pointer;border-radius:5px}#drop-area{margin-top:20px;padding:20px;border:2px dashed #ccc;text-align:center;min-height:100px}#drop-area p{font-size:16px;color:#777}#board_container{position:absolute;top:1%;left:50%;transform:translate(-50%);width:35%;aspect-ratio:4 / 3}#destinationBoard{position:absolute;top:0%;left:50%;transform:translate(-50%);width:100%}#imgLeft{display:none;position:absolute;bottom:60%;left:25%;transform:translate(-50%);width:15%;opacity:.5}#imgCenterToLeft{position:absolute;bottom:60%;left:50%;transform:translate(-50%);width:25%;opacity:1}#imgRightToCenter{position:absolute;bottom:60%;left:75%;transform:translate(-50%);width:15%;opacity:.5}#imgRight{display:none;position:absolute;bottom:60%;left:75%;transform:translate(-50%);width:15%;opacity:.5}#destination_count{position:absolute;bottom:30%;left:50%;width:50%;transform:translate(-50%,50%);text-align:center;color:#343434;font-family:GameFont,sans-serif;background-color:#45eb6900}@keyframes moveCenterToLeft{0%{left:50%;opacity:1;width:25%}to{left:25%;opacity:.5;width:15%}}.animateCenterToLeft{animation:moveCenterToLeft 1s forwards}@keyframes moveRightToCenter{0%{left:75%;opacity:.5;width:15%}to{left:50%;opacity:1;width:25%}}.animateRightToCenter{animation:moveRightToCenter 1s forwards}@keyframes showRight{0%{opacity:0;width:0%}to{opacity:.5;width:15%}}.animateShowRight{animation:showRight 1s forwards}@keyframes hideLeft{0%{opacity:.5;width:15%}to{opacity:0;width:0%}}.animateHideLeft{animation:hideLeft 1s forwards}