* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
*:before, *:after {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}

@font-face {
  font-family: "DonguriDuel";
  src: url("./font/x10y12pxDonguriDuel.ttf") format("truetype");
}
.entrance_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
}
.entrance_box.active {
  opacity: 1;
  pointer-events: auto;
}
.entrance_box .entrance-inner {
  opacity: 0;
  transform: translateY(20px);
  transition: all ease-in-out 0.6s;
}
.entrance_box .entrance-inner.active {
  opacity: 1;
  transform: translateY(0px);
  transition-delay: 0.1s;
}
.entrance_box .entrance_txt {
  text-align: center;
  font-size: 1.25vw;
  margin-bottom: 1.5vw;
}
@media screen and (max-width: 1024px) {
  .entrance_box .entrance_txt {
    font-size: 4.3vw;
    margin-bottom: 9.346vw;
  }
}

.game-screen-panel {
  display: flex;
  justify-content: center;
  padding-top: 2.865vw;
}
@media screen and (max-width: 1024px) {
  .game-screen-panel {
    padding-top: 3vw;
  }
}
.game-screen-panel .game-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.833vw;
}
.game-screen-panel .game-status-header .game-status-flex {
  width: 24.479vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.game-screen-panel .game-status-header .bonus_gauge_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 11.354vw;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.game-screen-panel .game-status-header .bonus_gauge_box .bonus_item_icon {
  width: 2.083vw;
}
.game-screen-panel .game-status-header .bonus_gauge_box #bonus_gauge {
  width: 100%;
  max-width: 8.542vw;
  height: 0.729vw;
  position: relative;
  z-index: 0;
  --gauge-percent: 100%;
}
.game-screen-panel .game-status-header .bonus_gauge_box #bonus_gauge::before {
  content: "";
  width: 8.854vw;
  height: 1.042vw;
  background-image: url(./images/gauge_frame.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.game-screen-panel .game-status-header .bonus_gauge_box #bonus_gauge::after {
  content: "";
  width: var(--gauge-percent);
  max-width: inherit;
  height: inherit;
  background: #ff5b24;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transform-origin: left center;
  z-index: -1;
}
.game-screen-panel .game-status-header .score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 5.729vw;
}
.game-screen-panel .game-status-header .label {
  font-family: "ab-megadot9", sans-serif;
  font-size: 0.938vw;
  position: relative;
}
.game-screen-panel .game-status-header .label::before {
  content: "";
  width: 2.083vw;
  height: 2.083vw;
  background-image: url(./images/cheese.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: -2.344vw;
  transform: translateY(-50%);
}
.game-screen-panel .game-status-header #cheese-count {
  font-family: "unibody-8-new", sans-serif;
  font-size: 1.25vw;
}
@media screen and (max-width: 1024px) {
  .game-screen-panel .game-status-header {
    margin-bottom: 2.336vw;
    align-items: flex-end;
  }
  .game-screen-panel .game-status-header .game-status-flex {
    width: 39.121vw;
    flex-direction: column;
    align-items: flex-end;
  }
  .game-screen-panel .game-status-header .bonus_gauge_box {
    width: 100%;
  }
  .game-screen-panel .game-status-header .bonus_gauge_box .bonus_item_icon {
    width: 5.477vw;
  }
  .game-screen-panel .game-status-header .bonus_gauge_box #bonus_gauge {
    max-width: 29.907vw;
    height: 3.738vw;
  }
  .game-screen-panel .game-status-header .bonus_gauge_box #bonus_gauge::before {
    width: 31.776vw;
    height: 3.738vw;
  }
  .game-screen-panel .game-status-header .score-item {
    width: 18.692vw;
  }
  .game-screen-panel .game-status-header .label {
    font-size: 2.804vw;
  }
  .game-screen-panel .game-status-header .label::before {
    width: 5.542vw;
    height: 4.542vw;
    left: -6.71vw;
  }
  .game-screen-panel .game-status-header #cheese-count {
    font-size: 3.738vw;
  }
}
@media screen and (max-width: 797px) {
  .game-screen-panel .game-status-header .game-status-flex {
    width: 41.121vw;
  }
  .game-screen-panel .game-status-header .bonus_gauge_box .bonus_item_icon {
    width: 7.477vw;
  }
  .game-screen-panel .game-status-header .label::before {
    width: 6.542vw;
    height: 6.542vw;
    left: -7.71vw;
  }
}
.game-screen-panel #gameCanvas {
  width: 100%;
  max-width: 36.25vw;
}
@media screen and (max-width: 1024px) {
  .game-screen-panel #gameCanvas {
    max-width: 64vw;
  }
}
@media screen and (max-width: 797px) {
  .game-screen-panel #gameCanvas {
    max-width: 92.523vw;
  }
}
@media screen and (max-width: 1024px) {
  .game-screen-panel .dpad-container {
    text-align: center;
  }
  .game-screen-panel .dpad-container .dpad-grid {
    width: 49vw;
    height: 26vw;
    margin: 0 auto;
    margin-top: 2vw;
    margin-bottom: 3.738vw;
    position: relative;
    z-index: 0;
  }
  .game-screen-panel .dpad-container .dpad-btn {
    width: 10.953vw;
    height: 11.019vw;
    position: absolute;
    z-index: 0;
  }
  .game-screen-panel .dpad-container .dpad-btn::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(./images/icon-arrow.webp);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
  }
  .game-screen-panel .dpad-container .dpad-btn-up {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .game-screen-panel .dpad-container .dpad-btn-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .game-screen-panel .dpad-container .dpad-btn-left::before {
    transform: rotate(-90deg);
  }
  .game-screen-panel .dpad-container .dpad-btn-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .game-screen-panel .dpad-container .dpad-btn-right::before {
    transform: rotate(90deg);
  }
  .game-screen-panel .dpad-container .dpad-btn-down {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .game-screen-panel .dpad-container .dpad-btn-down::before {
    transform: scale(1, -1);
  }
}
@media screen and (max-width: 797px) {
  .game-screen-panel .dpad-container .dpad-grid {
    width: 57vw;
    height: 36vw;
  }
  .game-screen-panel .dpad-container .dpad-btn {
    width: 12.953vw;
    height: 12.019vw;
  }
}/*# sourceMappingURL=game_style.css.map */