html {
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 1200px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 992px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 400px) {
  html {
    font-size: 14px;
  }
}
@media (max-width: 320px) {
  html {
    font-size: 12px;
  }
}

html body {
  font-family: source-han-sans-traditional, sans-serif;
  font-weight: 400;
}

a {
  transition: 200ms linear;
}
a:link, a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

b {
  font-weight: 700;
}

a[data-fancybox] {
  cursor: pointer;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-xl {
    padding-left: 0;
    padding-right: 0;
  }
}

.d-xxs-block {
  display: none;
}
@media (max-width: 325px) {
  .d-xxs-block {
    display: block;
  }
}

.d-xs-block {
  display: none;
}
@media (max-width: 500px) {
  .d-xs-block {
    display: block;
  }
}

.swiper-pagination-bullet:only-child {
  display: none;
}

body {
  opacity: 0;
}

#debugBar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #cccccc;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 2rem;
  z-index: 999999;
}

#landscape {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 999999;
  background-position: center center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-image: url(../images/landscape.png);
}

.mask-bg {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}
.mask-bg.nav {
  z-index: 1500;
}
.mask-bg.game {
  z-index: 2500;
}
.mask-bg.game-tutorial {
  background: rgba(0, 0, 0, 0.4);
  z-index: 2501;
}

.tmp-transform {
  transition: none !important;
}

.magnify {
  transition: ease-out 0.2s;
}
.magnify:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
}
.magnify:hover.magnify-xl {
  transform: scale(1.25, 1.25);
  -webkit-transform: scale(1.25, 1.25);
  -moz-transform: scale(1.25, 1.25);
  -o-transform: scale(1.25, 1.25);
}

.game-indication-widget {
  position: fixed;
  pointer-events: none;
  border-radius: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: left;
}
.game-indication-widget .value-change {
  position: absolute;
  right: 1rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1003;
}
.game-indication-widget .value-change.bonus {
  color: #0EB491;
}
.game-indication-widget .value-change.deduct {
  color: #DA6564;
}
.game-indication-widget .value-change.animate {
  animation: value-change 0.8s linear forwards;
  -webkit-animation: value-change 0.8s linear forwards;
}

#riceWidget {
  top: 6rem;
  right: 1rem;
  z-index: 1002;
}
#riceWidget .rice {
  position: absolute;
  background-image: url("../images/rice-icon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 3rem;
  height: 3rem;
  top: 0.25rem;
  left: -3.5rem;
  z-index: 1002;
}
#riceWidget .title, #riceWidget .rice-count {
  display: inline-block;
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1D7773;
}
#riceWidget .rice-count {
  font-size: 1.75rem;
}
#riceWidget .value-change {
  min-width: 6rem;
  font-size: 1.25rem;
}
@media (max-width: 576px) {
  #riceWidget .rice {
    width: 2.5rem;
    height: 2.5rem;
    left: -3rem;
  }
  #riceWidget .title {
    font-size: 1.125rem;
  }
  #riceWidget .rice-count {
    font-size: 1.5rem;
  }
}

#scoreWidget {
  top: 1.5rem;
  right: 0;
  min-width: 35vw;
  height: 4.25rem;
  background-color: #ffffff;
  border-top-left-radius: 100px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 0;
  color: #1D7773;
  padding: 0;
  padding-right: 1rem;
  padding-top: 0.4rem;
  z-index: 1001;
  text-align: right;
}
#scoreWidget .title {
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 500;
}
#scoreWidget .title .colon {
  display: none;
}
#scoreWidget .score-wrapper {
  display: block;
  font-size: 1.75rem;
  line-height: 1;
}
#scoreWidget .value-change {
  font-size: 1.25rem;
}
@media (max-width: 576px) {
  #scoreWidget {
    height: 3.5rem;
    padding-top: 0;
  }
  #scoreWidget .title {
    font-size: 0.9rem;
  }
}

#timerWidget {
  top: 1.5rem;
  left: 2rem;
  z-index: 999;
}
#timerWidget .timer-wrapper {
  border-radius: inherit;
  padding: 0.125rem 1.5rem 0.125rem 3.5rem;
  color: #1EBF1A;
  font-size: 1.75rem;
  letter-spacing: 1px;
  text-align: center;
  width: 10rem;
  height: 2.5rem;
  z-index: 1001;
}
#timerWidget .clock {
  position: absolute;
  background-image: url("../images/game-timer-clock.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 2.5rem;
  height: 2.5rem;
  top: 0.25rem;
  z-index: 1002;
}
@media (max-width: 840px) {
  #timerWidget .timer-wrapper {
    width: 12rem;
    height: 3rem;
    font-size: 1.75rem;
  }
}
@media (max-width: 576px) {
  #timerWidget {
    top: 2rem;
    left: 2rem;
    margin-left: 0;
  }
  #timerWidget .timer-wrapper {
    width: 10rem;
    height: 3rem;
    font-size: 1.5rem;
    padding: 0.125rem 0.5rem 0.125rem 0rem;
  }
  #timerWidget .clock {
    width: 1.75rem;
    height: 1.75rem;
    top: 0.5rem;
  }
}
@keyframes value-change {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    transform: translateY(-1rem);
    opacity: 1;
  }
  80% {
    transform: translateY(-3rem);
    opacity: 1;
  }
  100% {
    transform: translateY(-4rem);
    opacity: 0;
  }
}
@-webkit-keyframes value-change {
  0% {
    -webkit-transform: translateY(0);
    opacity: 0;
  }
  30% {
    -webkit-transform: translateY(-1rem);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(-3rem);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-4rem);
    opacity: 0;
  }
}
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}/*# sourceMappingURL=common.css.map */