:root {
  color-scheme: only light;
}
* {
  /* 텍스트 선택 비활성화 (전체 페이지 모든 요소에 강제 적용) */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;

  /* 모바일 사파리 길게 눌러 메뉴 방지 (전체 요소에 강제 적용) */
  -webkit-touch-callout: none !important;
}

html,
body {
  font-family: sans-serif;
  font-size: medium;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none !important;
}

body {
  background-color: #10286e;
  margin: 0;
  padding: 0;
  height:100%;
  background-image:url(../assets/images/bg.png);
  background-repeat: repeat-x;
  background-position: center center;
}


body,
a {
  text-align: center;
}

video,
canvas {
  display: block;
}

button,
input,
select {
  background-color: transparent;
  margin: 0;
  border: 0;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  padding-top: 2px;
}

button,
button:focus {
  outline: none;cursor: pointer;
}

a {
  text-decoration: none;cursor: pointer;
}

/* layout */

body::before,
body::after{
  content:"";position:absolute;display:block;left:0;width:100%;height:50%;z-index:0
}
body::before{bottom:0;background:#132365;}
body::after{top:0;background:#111a56;}
.minigame-wrapper{
  z-index:1;
  background-image:url(../assets/images/bg.png);
  background-repeat: repeat-x;
  background-position: center center;
}
.minigame-wrapper .hidden{
  display:none;pointer-events:none !important
}
.minigame-wrapper .blank-img{
  width:100%;height:100%;object-fit: fill;
}
.minigame-wrapper {
  position:relative;
  width:100%;
  height:100vh;
  font-size:0;line-height:0;
}
.minigame-wrapper img {
  display: block;
  width: 100%;
  height: auto
}
.minigame-wrapper p,
.minigame-wrapper span,
.minigame-wrapper button{
  display:block;padding:0;margin:0;
}
.game-scene-box{
  position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto;
  overflow: clip;
}
.scene-bg{
  position:absolute;
  left:50%;
  top:50%;
  aspect-ratio:2/1;
  object-fit:cover;
  min-width:100%;
  width:auto;
  height:100%;
  max-height:100%;
  transform:translate3d(-50%,-50%,0);
}
.scene-bg-inner{
  content:"";display:block;
  position:absolute;
  left:50%;top:0;
  width:auto;
  height:100%;
  transform: translate3d(-50%, 0, 0);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}
#main-box .scene-bg-inner{
  background-image:url(../assets/images/bg_main.png)
}
#select-box .scene-bg-inner{
  width:100%;
  background-image:url(../assets/images/bg_select.png)
}
#game-box .scene-bg-inner{
  background-image:url(../assets/images/bg_game.png);
}

.game-screen{
  position:relative;
  height:100%;
  width:auto;
  aspect-ratio:2/1;
  object-fit:contain;
  margin:0 auto;
}

#main-box .bi{
  width:2.47rem;
  display:block;
  margin:0 auto;
  padding-top:.44rem;
}

#main-box .game-logo{
  width:7.22rem;
  display:block;
  margin:0 auto;
  margin-top:.38rem;
}
#main-box .copyright{
  width:4.63rem;
  display:block;
  margin:0 auto;
  margin-top:.17rem
}
#main-box .game-start-btns{
  width:4.41rem;
  display:flex;flex-direction: column;justify-content:end;
  margin:0 auto;
  height:3.9rem;
  gap:.1rem
}

#main-box .game-start-btns button{
  height:1.05rem;
  position:relative;
  display:block;
  cursor: pointer;
}

#main-box .game-start-btns button::before,
#main-box .game-start-btns button::after{
  content:"";display:block;width:100%;position:absolute;left:0;top:0;
  width:100%;height:100%;
  background-repeat: no-repeat;
  background-size:100% auto;  
}
#main-box .game-start-btns button::before{
  background-position:center top;
  opacity:1;
}
#main-box .game-start-btns button::after{
  background-position:center bottom;
  opacity:0;
}

#main-box .game-start-btns > button{
  flex:none;
  width:100%
}
#main-box .game-start-btns .sound-btns{
  display:flex;
  width:100%;
  justify-content: space-between;
  gap:.11rem;
}
#main-box .game-start-btns .sound-btns > button{
  flex:1
}

#main-play-btn::before,
#main-play-btn::after{
  background-image:url(../assets/images/btn_play.png);
}
#main-help-btn::before,
#main-help-btn::after{
  background-image:url(../assets/images/btn_help.png);
}
#toggle-bgm-btn::before,
#toggle-bgm-btn::after{
  background-image:url(../assets/images/btn_bgm_off.png);
}
#toggle-bgm-btn.on::before,
#toggle-bgm-btn.on::after{
  background-image:url(../assets/images/btn_bgm_on.png);
}
#toggle-sfx-btn::before,
#toggle-sfx-btn::after{
  background-image:url(../assets/images/btn_sfx_off.png);
}
#toggle-sfx-btn.on::before,
#toggle-sfx-btn.on::after{
  background-image:url(../assets/images/btn_sfx_on.png);
}

#main-box .wave{
  position:absolute;
  width:100%;left:0;top:53.5%;
}
#main-box .cloud.c-l{
  position:absolute;top:11.23%
}

#main-box .cloud.c-r{
  position:absolute;top:15.916%
}
#main-box .tree.t-l{
  position:absolute;top:-17.083%
}
#main-box .tree.t-r{
  position:absolute;top:-5.21%
}
#main-box .ship{
  position:absolute;top:43.542%
}
#main-box .ball{
  position:absolute;top:58.542%
}
#main-box .bush{
  position:absolute;top:69.375%
}

#select-box .notch{
  position:absolute;top:0;width:7.56rem;left:50%;transform:translate3d(-50%, 0,0);
}

#select-box .notice{
  position:absolute;bottom:0;width:9.56rem;left:0;
}

.game-select-btns{
  height:100%;
  box-sizing: border-box;
  padding-top:.32rem;
  position:relative;width:8.4rem;
  margin:0 auto;display:flex;align-items: center;
  justify-content: center;gap:1rem
}
.game-select-btns > button{
  display:block;flex:1;
  position:relative;
}

.game-select-btns > button .blank-img{
  position:absolute;left:0;top:0
}
.game-select-btns > button::before,
.game-select-btns > button::after{
  content:"";display:block;
  width:100%;
  background:url(../assets/images/select_card_select.png) no-repeat center top / 100% auto;
}
.game-select-btns > button::before{
  padding-top:162.5%;background-position-y:0;
  opacity:1;
}
.game-select-btns > button::after{position:absolute;left:0;top:0;height:100%;opacity:0;background-position-y:100%}
.game-select-btns > button .yuridori{
  display:block;
  position:absolute;z-index: 1;
  left:50%;top:45%;
  transform:translate3d(-50%, -50%, 0);
  width:2.4rem;
}

#game-box .scene-bg-inner{
  background-position-y:48.8%;
}
#game-box .game-screen{  
  aspect-ratio: 2/1;
  width:auto;height:100%;
}

#game-box .cloud{
  position:absolute;
  top:0;;
  z-index:1
}
#game-box .sea{
  position:absolute;
  top:48.8%;
  z-index:1
}
#game-box .deck{
  position:absolute;
  bottom:0;
  z-index:1
}
#game-box .sun{
  position:absolute;
  top:4.6%;
  transform:translate3d(0,100%, 0);
  z-index:0;
}

#game-canvas{
  image-rendering: pixelated;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;z-index:2;
}



/* language-select-button */
#language-box,
#language-box .game-screen {
  pointer-events: none;
}

.language-select-button {
  width: 1.5rem;
  height: auto;
  position: absolute;
  right: .4rem;
  top: .3rem;
  z-index: 99;
  pointer-events: auto;
}

.language-select-button .toggle-button,
.language-select-button .language__item {
  font-weight: 400;
  font-size: .3rem;
  line-height: .4rem;
  padding: .11rem 0 .09rem;
  width: 100%;
  text-align: center;
  cursor: pointer;
  color: #fff;
  letter-spacing: -.06em;
}

.language-select-button .toggle-button {
  border-radius: .1rem;
  margin: 0;
  position: relative;
  z-index: 1;
  background-color: #4211bd;
  cursor: pointer;
}

.language-select-button .expander {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  overflow: hidden;
  max-height: 0px;
  border-radius: .1rem;
  position: absolute;
  left: 0;
  top: 0;
  transition: all .2s linear;
  background-color: #4211bd7a;
  cursor: pointer;
}

.language-select-button.active .expander {
  max-height: 2.5rem;
  padding: .48rem 0 .12rem
}






/* layer */
.screen-layer{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events: none;
  opacity:0
}
.game-scene-box .screen-layer{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(.08rem);
}
#game-over-box {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 1;
  pointer-events: auto;
}

#game-over-box.hidden {
  opacity: 0;
  pointer-events: none;
}

#game-fade-overlay{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,.75);
  opacity:0;
  z-index:5;
  pointer-events:none;
  transition:opacity .5s ease-out
}



#help-box{
  pointer-events:none;
  z-index:1;
  opacity:0;display:none
}
#help-box.visible{
  pointer-events: fill;
  z-index:2;
  opacity:1;display:block
}

.help-content{position:absolute;
left:50%;top:50%;transform: translate3d(-50%, -50%, 0);width:75%}

.close-help-btn{
  position:absolute;right:14.5%;top:4.5%;width:5.5%;
}
.close-help-btn::before,
.close-help-btn::after{
  content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;background:url(../assets/images/btn_pop_close.png) no-repeat center top / 100% auto;
}
.close-help-btn::before{background-position-y:0;opacity:1}
.close-help-btn::after{background-position-y:100%;opacity:0}



.home-icon-btn{
  position:absolute;
  width:.66rem;
  left: .6rem;
  top: .3rem;
}
.home-icon-btn::before,
.home-icon-btn::after{
  content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;background:url(../assets/images/btn_home.png) no-repeat center top / 100% auto;
}
.home-icon-btn::before{background-position-y:0;opacity:1}
.home-icon-btn::after{background-position-y:100%;opacity:0}


.game-over-content{height:100%;display:flex;flex-direction: column;align-items: center;justify-content: center;gap:.3rem}
.btn-in-box{
  display:block;flex:none;
  margin:0 auto;width:4.41rem;height:1.05rem;position:relative;
  cursor: pointer;
}
.btn-in-box::before,
.btn-in-box::after{
  content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;background-repeat:no-repeat;background-position:center top;background-size:100% auto;
}
.btn-in-box::before{background-position-y:0;opacity:1}
.btn-in-box::after{background-position-y:100%;opacity:0}

#restart-game-btn::before,
#restart-game-btn::after{background-image:url(../assets/images/btn_retry.png)}
#go-main-btn::before,
#go-main-btn::after{background-image:url(../assets/images/btn_main.png)}



/* animation */
#game-box.act .deck{
  animation: deck-move 3s 2s ease-in-out infinite
}
#game-box.act .sun{
  animation: sun-up-move 3s ease-in-out forwards
}


@keyframes deck-move {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, .5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes sun-up-move {
  0% { transform: translate3d(0, 100%, 0);opacity:0 }
  10% { opacity:1 }
  100% { transform: translate3d(0, 0, 0);opacity:1 }
}

#main-box.act .cloud.c-r > img{
  animation-direction: reverse;
}
#main-box.act .cloud > img{
  animation: cloud-up-down 2.5s steps(3) infinite
}
@keyframes cloud-up-down {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -2%, 0); }
  75% { transform: translate3d(0, 2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}



#select-box .notch{
  opacity:0;transform:translate3d(-50%,-100%, 0);
}
#select-box .notice{
  opacity:0;transform:translate3d(-100%,0, 0);
}
#select-box.act .notch{
  animation: notch-drop .25s .25s ease-out forwards
}
#select-box.act .notice{
  animation: notice-slide .35s .25s ease-in-out forwards
}
#select-box .game-select-btns > button{
  opacity:0;transform: rotate3d(0,1,0,-90deg);
}
#select-box.act .game-select-btns > button{
  animation: card-open .25s .65s ease-in-out forwards
}

@keyframes notch-drop {
  0% { transform: translate3d(-50%, -100%, 0); opacity:0}
  100% { transform: translate3d(-50%, 0, 0); opacity:1 }
}
@keyframes notice-slide {
  0% { transform: translate3d(0, 5%, 0); opacity:0}
  100% { transform: translate3d(0, 0, 0); opacity:1 }
}
@keyframes card-open {
  0% { transform: rotate3d(0,1,0,-90deg);opacity:0}
  100% { transform: rotate3d(0,1,0,0deg); opacity:1 }
}