:root {
  font-size: max(min(83.33px, 5.2vw),52px);
  --scrollbar-width:16px;
  --screen-width:max(min(1600px, calc(100vw - var(--scrollbar-width))), 1000px);
  --screen-height:calc(var(--screen-width) * 0.5);
}
.minigame-wrapper {
  min-width: 1000px;
  min-height: var(--screen-height);
}
.game-scene-box{
  left:50%;
  top:50%;
  max-width:min(1600px, 100%);
  max-height:min(800px, 100%);
  transform: translate3d(-50%,-50%, 0);
  height:auto;
  width:100%;
  aspect-ratio: 2/1;
  box-sizing:border-box;
  border-radius: .2rem;
  box-shadow: 0 0 .3rem rgba(0, 0, 0, .4);
  
}
.scene-bg-inner{
  aspect-ratio: 2/1;
}

.game-scene-box::after{
  content:"";display:block;position:absolute;left:0;top:0;bottom:0;right:0;border:.1rem solid #d3b31f;
  border-radius: .2rem;pointer-events:none;opacity:1;z-index:10
}
.game-scene-box.out-layer::after{
  display:none;
}
.game-screen{
  width:100%;
  height:100%;
}
#main-box .cloud.c-l{width:14.58%;left:19.865%}
#main-box .cloud.c-r{width:19.375%;left:66.6875%}
#main-box .tree.t-l{width:39.1146%;left:-10.8334%}
#main-box .tree.t-r{width:32.76%;left:77.396%}
#main-box .ship{width:23.59375%;left:11.09375%}
#main-box .ball{width:16.146%;left:69.896%}
#main-box .bush{width:21.09375%;left:-7.083%}

#game-box .cloud,
#game-box .sea,
#game-box .deck{
  width:150%;left:-25%;
}
#game-box .sun{
  width:8.5%;left:19.2%
}


#help-box .game-screen{
  background:url(images/pop_bg.png) repeat center;
}



#main-box .game-start-btns button:hover::before{
  opacity:0
}
#main-box .game-start-btns button:hover::after{
  opacity:1
}
.game-select-btns > button:hover::before{
  opacity:0
}
.game-select-btns > button:hover::after{
  opacity:1
}

.close-help-btn:hover::before{opacity:0}
.close-help-btn:hover::after{opacity:1}

.home-icon-btn:hover::before{opacity:0}
.home-icon-btn:hover::after{opacity:1}
.btn-in-box:hover::before{opacity:0}
.btn-in-box:hover::after{opacity:1}




#main-box.act .ship{
  animation: ship-move 100s ease-in infinite
}
@keyframes ship-move {
  0% { left:11.09375%;opacity:1 }
  84.9% { opacity:1 }
  85% { left:100%;opacity:0 }
  87% { left:-12%;opacity:0 }
  87.1% { opacity:1 }
  100% { left:11.09375%;opacity:1 }
}