.bottomBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  z-index:9999;
  padding:14px 16px;
  background:linear-gradient(180deg,#232F3E 0%,#131921 100%);
  color:#FFFFFF;
  box-shadow:
    0 -10px 28px rgba(0,0,0,.22),
    0 -2px 8px rgba(0,0,0,.10);
  transform:translateY(110%);
  transition:
    transform .45s cubic-bezier(.22,.9,.32,1),
    background .22s ease,
    box-shadow .22s ease,
    color .22s ease;
}

.bottomBar.show{
  transform:translateY(0);
}

.bottomBar__content{
  max-width:900px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}

.bottomBar__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex-shrink:0;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.08);
  font-size:18px;
  line-height:1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.10);
  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.bottomBar__title{
  color:#FFFFFF;
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.3;
  transition:color .22s ease;
}

.bottomBar.bottomBar--success{
  background:linear-gradient(180deg,#FFB84D 0%,#FF9900 100%);
  box-shadow:
    0 -10px 28px rgba(255,153,0,.24),
    0 -2px 8px rgba(255,153,0,.12);
}

.bottomBar.bottomBar--success .bottomBar__icon{
  background:rgba(19,25,33,.10);
  border-color:rgba(19,25,33,.08);
  color:#131921;
}

.bottomBar.bottomBar--success .bottomBar__title{
  color:#131921;
}

.bottomBar__gainToast{
  position:fixed;
  left:50%;
  bottom:86px;
  z-index:100001;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:14px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#FFB84D 0%,#FF9900 100%);
  color:#131921;
  font-size:15px;
  font-weight:900;
  line-height:1;
  box-shadow:
    0 18px 38px rgba(255,153,0,.28),
    0 6px 14px rgba(0,0,0,.10);
  transform:translate(-50%,20px) scale(.92);
  opacity:0;
  pointer-events:none;
  transition:
    transform .26s ease,
    opacity .26s ease;
}

.bottomBar__gainToast.is-visible{
  transform:translate(-50%,0) scale(1);
  opacity:1;
}

.bottomBar__gainToastEmoji{
  font-size:18px;
  line-height:1;
}

.bottomBar__gainToastText{
  display:inline-block;
}

@media (max-width:560px){
  .bottomBar{
    padding:12px 14px;
  }

  .bottomBar__content{
    gap:10px;
  }

  .bottomBar__icon{
    width:30px;
    height:30px;
    font-size:16px;
  }

  .bottomBar__title{
    font-size:13px;
  }

  .bottomBar__gainToast{
    bottom:96px;
    font-size:14px;
    padding:13px 16px;
  }
}