.fancy-blue-border,
.fancy-orange-border,
.bevel-border {
  position: relative;
}

.fancy-blue-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-image: url("/assets/blue-border-d18e7d31.png") 16 16 16 16 fill / 16px 16px 16px 16px;
  padding: 16px 16px 16px 16px;
  pointer-events: none;
  z-index: 10;
}

.fancy-orange-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-image: url("orange-border.png") 16 16 16 16 fill / 16px 16px 16px 16px;
  padding: 16px 16px 16px 16px;
  pointer-events: none;
  z-index: 10;
}

.bevel-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-image: url("/assets/bevel-1ec6aad8.png") 2 2 2 2 fill / 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  pointer-events: none;
  z-index: 10;
}

.bg-paper {
  background-image: url("/assets/paper-d2d316c7.png");
  background-repeat: repeat;
}

/* Dice roll overlay */
.dice-roll-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
}

.dice-roll-overlay canvas {
  width: 100% !important;
  height: 100% !important;
}

.dice-roll-selected {
  background-color: rgb(167, 173, 186, 0.15);
  animation: dice-highlight-pulse 0.5s ease-out;
}

@keyframes dice-highlight-pulse {
  0% {
    background-color: rgb(167, 173, 186, 0.25);
  }
  100% {
    background-color: rgb(167, 173, 186, 0.15);
  }
}

/* Fade in animation */
.animate-fade-in {
  animation: fade-in 1s ease-out 3s forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}