* {padding: 0; margin: 0; font: inherit; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
}
html, body {height: 100%; overflow: hidden;}
body {
  background: url(../img/sheep/bg.jpg) no-repeat center / cover;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
}

#game-app {
  max-width: 500px; height: 100%;
  margin: 0 auto; white-space: nowrap;
  color: #fff; font-size: 16px; text-align: center;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#game-app > .game-container {padding: .1px 15px 15px 15px; position: relative;}
#game-app > .game-container > div {margin-top: 20px;}
#game-app .game-title {font-size: 26px; text-align: center;}
#game-app .game-display {display: flex;}
#game-app .game-display > div:not(:last-child) {margin-right: 15px;}
#game-app .game-display .wrapper-square {width: 120px;}
#game-app .game-display .wrapper-square > .inner {padding-top: 100%; background: rgba(0, 0, 0, .4); border-radius: 4px;}
#game-app .game-display .wrapper-score {flex: 1; display: flex; flex-direction: column;}
#game-app .game-display .wrapper-score .up {flex: 1; background: rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; border-radius: 4px;}
#game-app .game-display .wrapper-score .down {margin-top: 15px;}
#game-app .game-display .wrapper-score .down .colorful-btn {border: 3px solid red; line-height: 1.9em; border-radius: 4px;}
#game-app .game-display .wrapper-score .down .btn-rank {background: #0a0; border-color: #0c0;}
#game-app .game-display .wrapper-score .down .btn-reset {background: #f60; border-color: #f90;}
#game-app .diary-text {padding: 15px; background: rgba(0, 0, 0, .4); text-align: left;}
#game-app .game-scene {}
#game-app .game-scene .inner {padding-top: 100%; background: rgba(0, 0, 0, .4); border-radius: 4px;}
#game-app .music-img {position: absolute; right: 15px; top: 15px; width: 40px;}
#game-app .music-img.play {animation: rotate 2s ease-in-out infinite;}

@keyframes rotate {
  0% {transform: rotate(-45deg);}
  50% {transform: rotate(45deg);}
  100% {transform: rotate(-45deg);}
}