.pixelPopupOverlay {
  @apply fixed inset-0 flex justify-center items-center z-50;
  background-color: var(--popup-overlay-bg, rgba(0, 0, 0, 0.5));
}

.pixelPopup {
  @apply relative p-1;
  background-color: var(--popup-base-bg, var(--bg-popup-base, white));
  color: var(--popup-text, var(--text-popup, black));
  border-style: solid;
  border-width: 5px;
  border-image-slice: 3;
  border-image-width: 2;
  border-image-repeat: stretch;
  border-image-source: var(--popup-border-svg);
  border-image-outset: 2;
  box-shadow: 2px 2px 0 2px var(--popup-base-bg, var(--bg-popup-base, white)),
    -2px -2px 0 2px var(--popup-base-bg, var(--bg-popup-base, white));
}

.pixelPopupInner {
  @apply p-4;
  background-color: var(--popup-bg, var(--bg-popup, #f0f0f0));
  color: var(--popup-text, var(--text-popup, black));
  border-style: solid;
  border-width: 5px;
  border-image-slice: 3;
  border-image-width: 2;
  border-image-repeat: stretch;
  border-image-source: var(--popup-border-svg);
  border-image-outset: 2;
  box-shadow: 2px 2px 0 2px var(--popup-bg, var(--bg-popup, #f0f0f0)),
    -2px -2px 0 2px var(--popup-bg, var(--bg-popup, #f0f0f0));
}

.pixelPopupTitle {
  @apply text-2xl mb-4 text-center font-minecraft;
}

.pixelPopupCloseButton {
  @apply absolute top-1 right-2 bg-transparent border-none cursor-pointer text-lg font-minecraft;
  color: var(--popup-text, var(--text-popup, black));
}

.pixelPopupContent {
  @apply font-minecraft;
}
