@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/Cinzel/Cinzel-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#control-ui-container {
  position: fixed;
  bottom: 200px;
  z-index: 9999;
  width: 100%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transform: translateX(-50%);
  --e33-color: #d5cbb2;
}

.E33-button {
  font-family: 'Cinzel', serif;
  padding: 12px 30px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--e33-color);
  border: none;
  position: relative;
  clip-path: polygon(0% 50%, 15px 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 15px 100%);
  transition: transform 0.15s ease-out 0.05s;
  font-size: 2rem;
  transition: opacity 0.15s ease-out 0.05s;

  &.disabled {
    opacity: 0.4;
    cursor: default;
  }
}

.E33-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--e33-color);
  --borderSize: 1px;
  clip-path: polygon(
    0% 50%,
    15px 0%,
    calc(100% - 15px) 0%,
    100% 50%,
    calc(100% - 15px) 100%,
    15px 100%,
    0% 50%,

    var(--borderSize) 50%,
    calc(15px + 0.5px) calc(100% - var(--borderSize)),
    calc(100% - 15px - 0.5px) calc(100% - var(--borderSize)),
    calc(100% - var(--borderSize)) 50%,
    calc(100% - 15px - 0.5px) var(--borderSize),
    calc(15px + 0.5px) var(--borderSize),
    var(--borderSize) 50%
  );
  z-index: -1;
}