.button[data-needs-token] .token-required {
  display: inline-block;
  width: 22px;
  height: 26px;
  margin-right: 14px;
  background-repeat: no-repeat;
  background-position: center 4px;
  background-size: contain;
  vertical-align: top;
  transform: scale(2);
}
.button[data-needs-token="willpower"] .token-required {
  background-image: url(../img/story-options/tokens/willpower.png);
}
.button[data-needs-token="insight"] .token-required {
  background-image: url(../img/story-options/tokens/insight.png);
}
.button[data-needs-token="guile"] .token-required {
  background-image: url(../img/story-options/tokens/guile.png);
}
.button[data-needs-token="finesse"] .token-required {
  background-image: url(../img/story-options/tokens/finesse.png);
}
.button--smallest[data-needs-token] .token-required {
  width: 15px;
  height: 20px;
  margin-right: 10px;
  transform: scale(2) translateY(-1px);
}
#story-canvas .button:not(:hover) .angry,
#story-canvas .cite:not(:hover) .angry {
  animation: shake 0.5s both;
  display: inline-block;
  animation-iteration-count: infinite;
}
.button[data-social]::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -25px;
  left: -90px;
  width: 196px;
  height: 120px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: scale(0.7) rotate(-20deg);
}
.button[data-social="mary-reinhardt"]::after {
  background-image: url(../img/story-options/invitations/mary-reinhardt.png);
}
.button[data-social="winona-reinhardt"]::after {
  background-image: url(../img/story-options/invitations/winona-reinhardt.png);
}
.button[data-go]::after {
  content: "";
  display: none;
  position: absolute;
  z-index: 2;
  top: -32px;
  left: -116px;
  width: 273px;
  height: 138px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: scale(0.6) rotate(-20deg);
}
.button[data-go="pleasure-garden"].free-ticket::after {
  background-image: url(../img/story-options/items/pleasure-garden-ticket.png);
}
.button[data-go="theatre"].free-ticket::after {
  background-image: url(../img/story-options/items/theatre-ticket.png);
}
.button[data-go="opera"].free-ticket::after {
  background-image: url(../img/story-options/items/opera-ticket.png);
}
.button[data-go].free-ticket::after {
  display: block;
}
.button[data-go].free-ticket .cost,
.button[data-go].free-ticket .gold {
  visibility: hidden;
}

.invitation {
  transform: rotate(-3deg);
}

@keyframes shake {
  10%, 90% {
    transform: translate(-1px, 2px);
  }
  
  20%, 80% {
    transform: translate(2px, 0);
  }

  30%, 50%, 70% {
    transform: translate(-3px, 1px);
  }

  40%, 60% {
    transform: translate(3px, 0);
  }
}

#story-canvas .character {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: #896146;
  margin-bottom: 6px;
}

#story-canvas h3 {
  margin: 16px 0 0 0;
  font-size: 26px;
}

#item-sockets {
  position: absolute;
  top: 80%;
  left: 12%;
  transition: transform 0.3s ease-in;
}

.spawn-anim {
  transition: left 0.3s ease-in, top 0.3s ease-in;
}

.socket {
  height: 120px;
  background-color: rgba(18, 10, 22, 0.8);
  box-shadow: inset 3px 3px rgba(0, 0, 0, 1), 1px 1px rgba(255, 255, 255, 0.2);
  border-radius: 60px;
  display: inline-block;
}

.socket .drag-target {
  border-radius: 50%;
  display: inline-block;
  width: 110px;
  height: 110px;
  line-height: 6.4em;
  font-size: 16px;
  text-align: center;
  margin: 5px 4px;
  text-transform: uppercase;
  font-family: 'Lora';
  font-weight: bold;
  vertical-align: bottom;
  opacity: 0.6;
  transition: opacity 0.1s ease-out;
}

.socket .drag-target {
  border: 4px rgba(243, 217, 189, 1) dashed;
  color: rgba(243, 217, 189, 1);
  background-color: rgba(243, 217, 189, 0.1);
}
.socket .drag-target.drag-target--active {
  background-color: rgba(243, 217, 189, 0.33);
}

.socket .drag-target.highlight {
    opacity: 1;
}

#item-sockets .token-preview,
#item-sockets .coin-preview {
  position: absolute;
  left: 62px;
  top: 0;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s ease-out;
}
#item-sockets .coin-preview {
  left: 160px;
  transform: translateX(-30%);
}
#item-sockets .coin-preview .amount {
  color: #eed383;
  vertical-align: top;
  font-size: 35px;
  font-family: Lora;
  line-height: 1.2em;
  text-align: right;
}
#item-sockets .coin-preview.is--active,
#item-sockets .token-preview.is--active {
  top: -50px;
  opacity: 1;
}
#item-sockets .token-preview .token,
#item-sockets .coin-preview .coin {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
}
#item-sockets .token-preview .cursed::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  background-image: url(../img/story-options/tokens/cursed.gif);
  background-size: 35px 35px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px rgb(255, 0, 255)) blur(2px) hue-rotate(-300deg);
  transform: scale(1.15);
}
#item-sockets .coin-preview .coin img,
#item-sockets .token-preview .token img {
  width: 100%;
  height: auto;
}