.tavernActionButton {
  --tavern-btn-scale: 0.52;
  --tavern-btn-text: #d8ccb0;
  --tavern-btn-text-hover: #fff2cf;
  --tavern-btn-border:
    linear-gradient(
      to bottom,
      #d7c29a,
      #a99670 48%,
      #604c36 52%,
      #806f57
    );
  --tavern-btn-border-hover:
    linear-gradient(
      to bottom,
      #f1dfb2,
      #c9ae74 48%,
      #7d5c31 52%,
      #a98a58
    );
  --tavern-btn-inlay:
    radial-gradient(
      at center 145%,
      rgba(224, 236, 255, 0.46),
      transparent 35%
    ) 50% 0% / 150% 28% no-repeat,
    radial-gradient(
      at center -22%,
      rgba(55, 99, 180, 0.84),
      transparent 38%
    ) 50% 100% / 150% 28% no-repeat,
    linear-gradient(
      to bottom,
      #1c2945,
      #35568f 23%,
      #233b69 27% 49%,
      #162847 51% 74%,
      #0b1427 78%,
      #101d35
    );

  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  min-width: min(310px, 44%);
  min-height: 86px;
  padding: 24px 62px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--tavern-btn-text);
  background: transparent;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.55vw, 20px);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1;
  text-align: center;
  text-shadow:
    1px -1px 1px rgba(255, 252, 242, 0.88),
    -1px 1px 1px rgba(22, 5, 0, 0.96);
  transition:
    color 0.16s ease,
    filter 0.16s ease,
    transform 0.10s ease;
}

.tavernActionButton::before,
.tavernActionButton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  pointer-events: none;
}

.tavernActionButton::before {
  background: var(--tavern-btn-inlay);
  clip-path: polygon(
    calc(50px * var(--tavern-btn-scale)) calc(82px * var(--tavern-btn-scale)),
    calc(114px * var(--tavern-btn-scale)) calc(18px * var(--tavern-btn-scale)),
    calc(100% - 114px * var(--tavern-btn-scale)) calc(18px * var(--tavern-btn-scale)),
    calc(100% - 50px * var(--tavern-btn-scale)) calc(82px * var(--tavern-btn-scale)),
    calc(100% - 50px * var(--tavern-btn-scale)) calc(100% - 82px * var(--tavern-btn-scale)),
    calc(100% - 114px * var(--tavern-btn-scale)) calc(100% - 18px * var(--tavern-btn-scale)),
    calc(114px * var(--tavern-btn-scale)) calc(100% - 18px * var(--tavern-btn-scale)),
    calc(50px * var(--tavern-btn-scale)) calc(100% - 82px * var(--tavern-btn-scale))
  );
  opacity: 1;
  transition:
    filter 0.16s ease,
    opacity 0.16s ease;
}

.tavernActionButton::after {
  background: var(--tavern-btn-border);
  clip-path: polygon(
    calc(37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(52px * var(--tavern-btn-scale)) calc(29px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(18px * var(--tavern-btn-scale)),
    calc(82.5px * var(--tavern-btn-scale)) calc(39.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(61px * var(--tavern-btn-scale)),
    0 0,
    calc(77px * var(--tavern-btn-scale)) 0,
    calc(90px * var(--tavern-btn-scale)) calc(13px * var(--tavern-btn-scale)),
    calc(103px * var(--tavern-btn-scale)) 0,
    calc(100% - 103px * var(--tavern-btn-scale)) 0,
    calc(100% - 90px * var(--tavern-btn-scale)) calc(13px * var(--tavern-btn-scale)),
    calc(100% - 77px * var(--tavern-btn-scale)) 0,
    100% 0,
    calc(100% - 61px * var(--tavern-btn-scale)) calc(61px * var(--tavern-btn-scale)),
    calc(100% - 82.5px * var(--tavern-btn-scale)) calc(39.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(18px * var(--tavern-btn-scale)),
    calc(100% - 52px * var(--tavern-btn-scale)) calc(29px * var(--tavern-btn-scale)),
    calc(100% - 37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(100% - 24.5px * var(--tavern-btn-scale)) calc(56.5px * var(--tavern-btn-scale)),
    calc(100% - 32.5px * var(--tavern-btn-scale)) calc(64.5px * var(--tavern-btn-scale)),
    calc(100% - 32.5px * var(--tavern-btn-scale)) calc(100% - 64.5px * var(--tavern-btn-scale)),
    calc(100% - 24.5px * var(--tavern-btn-scale)) calc(100% - 56.5px * var(--tavern-btn-scale)),
    calc(100% - 37px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(100% - 52px * var(--tavern-btn-scale)) calc(100% - 29px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(100% - 18px * var(--tavern-btn-scale)),
    calc(100% - 82.5px * var(--tavern-btn-scale)) calc(100% - 39.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(100% - 61px * var(--tavern-btn-scale)),
    100% 100%,
    calc(100% - 77px * var(--tavern-btn-scale)) 100%,
    calc(100% - 90px * var(--tavern-btn-scale)) calc(100% - 13px * var(--tavern-btn-scale)),
    calc(100% - 103px * var(--tavern-btn-scale)) 100%,
    calc(103px * var(--tavern-btn-scale)) 100%,
    calc(90px * var(--tavern-btn-scale)) calc(100% - 13px * var(--tavern-btn-scale)),
    calc(77px * var(--tavern-btn-scale)) 100%,
    0 100%,
    calc(61px * var(--tavern-btn-scale)) calc(100% - 61px * var(--tavern-btn-scale)),
    calc(82.5px * var(--tavern-btn-scale)) calc(100% - 39.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(100% - 18px * var(--tavern-btn-scale)),
    calc(52px * var(--tavern-btn-scale)) calc(100% - 29px * var(--tavern-btn-scale)),
    calc(37px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(24.5px * var(--tavern-btn-scale)) calc(100% - 56.5px * var(--tavern-btn-scale)),
    calc(32.5px * var(--tavern-btn-scale)) calc(100% - 64.5px * var(--tavern-btn-scale)),
    calc(32.5px * var(--tavern-btn-scale)) calc(64.5px * var(--tavern-btn-scale)),
    calc(24.5px * var(--tavern-btn-scale)) calc(56.5px * var(--tavern-btn-scale)),
    calc(37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(45px * var(--tavern-btn-scale)) calc(52px * var(--tavern-btn-scale)),
    calc(41px * var(--tavern-btn-scale)) calc(56px * var(--tavern-btn-scale)),
    calc(50px * var(--tavern-btn-scale)) calc(66px * var(--tavern-btn-scale)),
    calc(40.5px * var(--tavern-btn-scale)) calc(75.5px * var(--tavern-btn-scale)),
    calc(40.5px * var(--tavern-btn-scale)) calc(100% - 75.5px * var(--tavern-btn-scale)),
    calc(50px * var(--tavern-btn-scale)) calc(100% - 66px * var(--tavern-btn-scale)),
    calc(41px * var(--tavern-btn-scale)) calc(100% - 56px * var(--tavern-btn-scale)),
    calc(45px * var(--tavern-btn-scale)) calc(100% - 52px * var(--tavern-btn-scale)),
    calc(37px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(52px * var(--tavern-btn-scale)) calc(100% - 29px * var(--tavern-btn-scale)),
    calc(59.5px * var(--tavern-btn-scale)) calc(100% - 36.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(100% - 35px * var(--tavern-btn-scale)),
    calc(65.5px * var(--tavern-btn-scale)) calc(100% - 39.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(25px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(72.5px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(90px * var(--tavern-btn-scale)) calc(100% - 25.5px * var(--tavern-btn-scale)),
    calc(107.5px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(100% - 107.5px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(100% - 90px * var(--tavern-btn-scale)) calc(100% - 25.5px * var(--tavern-btn-scale)),
    calc(100% - 72.5px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(100% - 25px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(100% - 65.5px * var(--tavern-btn-scale)) calc(100% - 39.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(100% - 35px * var(--tavern-btn-scale)),
    calc(100% - 59.5px * var(--tavern-btn-scale)) calc(100% - 36.5px * var(--tavern-btn-scale)),
    calc(100% - 52px * var(--tavern-btn-scale)) calc(100% - 29px * var(--tavern-btn-scale)),
    calc(100% - 37px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(100% - 45px * var(--tavern-btn-scale)) calc(100% - 52px * var(--tavern-btn-scale)),
    calc(100% - 41px * var(--tavern-btn-scale)) calc(100% - 56px * var(--tavern-btn-scale)),
    calc(100% - 50px * var(--tavern-btn-scale)) calc(100% - 66px * var(--tavern-btn-scale)),
    calc(100% - 40.5px * var(--tavern-btn-scale)) calc(100% - 75.5px * var(--tavern-btn-scale)),
    calc(100% - 40.5px * var(--tavern-btn-scale)) calc(75.5px * var(--tavern-btn-scale)),
    calc(100% - 50px * var(--tavern-btn-scale)) calc(66px * var(--tavern-btn-scale)),
    calc(100% - 41px * var(--tavern-btn-scale)) calc(56px * var(--tavern-btn-scale)),
    calc(100% - 45px * var(--tavern-btn-scale)) calc(52px * var(--tavern-btn-scale)),
    calc(100% - 37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(100% - 52px * var(--tavern-btn-scale)) calc(29px * var(--tavern-btn-scale)),
    calc(100% - 59.5px * var(--tavern-btn-scale)) calc(36.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(35px * var(--tavern-btn-scale)),
    calc(100% - 65.5px * var(--tavern-btn-scale)) calc(39.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(100% - 25px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(100% - 72.5px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(100% - 90px * var(--tavern-btn-scale)) calc(25.5px * var(--tavern-btn-scale)),
    calc(100% - 107.5px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(107.5px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(90px * var(--tavern-btn-scale)) calc(25.5px * var(--tavern-btn-scale)),
    calc(72.5px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(25px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(65.5px * var(--tavern-btn-scale)) calc(39.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(35px * var(--tavern-btn-scale)),
    calc(59.5px * var(--tavern-btn-scale)) calc(36.5px * var(--tavern-btn-scale)),
    calc(52px * var(--tavern-btn-scale)) calc(29px * var(--tavern-btn-scale)),
    calc(37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale))
  );
  filter:
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 8px rgba(212, 175, 96, 0.10));
  transition:
    background 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease;
}

.tavernExitButton {
  --tavern-btn-inlay:
    radial-gradient(
      at center 145%,
      rgba(224, 236, 255, 0.28),
      transparent 35%
    ) 50% 0% / 150% 28% no-repeat,
    linear-gradient(
      to bottom,
      #202938,
      #3d4c66 23%,
      #29364b 27% 49%,
      #192334 51% 74%,
      #0c121d 78%,
      #131c29
    );
}

.tavernTalesButton {
  --tavern-btn-text: #dfd1b3;
  --tavern-btn-inlay:
    radial-gradient(
      at center 145%,
      rgba(255, 244, 218, 0.48),
      transparent 35%
    ) 50% 0% / 150% 28% no-repeat,
    radial-gradient(
      at center -22%,
      rgba(122, 35, 18, 0.88),
      transparent 38%
    ) 50% 100% / 150% 28% no-repeat,
    linear-gradient(
      to bottom,
      #39231c,
      #8b5041 23%,
      #4c281e 27% 49%,
      #2d160e 51% 74%,
      #180704 78%,
      #230a04
    );
}

.tavernActionButton:hover,
.tavernActionButton:focus-visible {
  color: var(--tavern-btn-text-hover);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.tavernActionButton:hover::before,
.tavernActionButton:focus-visible::before {
  filter: saturate(1.08) brightness(1.08);
}

.tavernActionButton:hover::after,
.tavernActionButton:focus-visible::after {
  background: var(--tavern-btn-border-hover);
  filter:
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 12px rgba(102, 154, 255, 0.28))
    drop-shadow(0 0 8px rgba(229, 188, 95, 0.14));
}

.tavernActionButton:focus,
.tavernActionButton:focus-visible {
  outline: none;
  box-shadow: none;
}

.tavernActionButton:active {
  transform: translateY(1px) scale(0.988);
}

.tavernActionButton:disabled {
  cursor: var(--cursor-not-allowed, not-allowed);
  filter: grayscale(0.48) brightness(0.72);
  opacity: 0.62;
  transform: none;
}

@media (max-width: 640px) {
  .tavernActionRow {
    align-items: stretch;
    flex-direction: column;
  }

  .tavernActionButton {
    width: 100%;
    min-width: 0;
  }
}