/* The one modal close X: a llamarollFont "X" in the modal's own text colour, as on the shop item popups.
   Covers Bootstrap's .btn-close (its SVG icon is swapped for the glyph), the popups' .close-popup,
   and .rollama-close for everything else. Load after page stylesheets. */
.btn-close,
.close-popup,
.rollama-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 4px 8px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  opacity: 1;
  color: inherit;
  font-family: llamarollFont, sans-serif;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.btn-close::before {
  content: "X";
}

.btn-close:hover,
.close-popup:hover,
.rollama-close:hover {
  opacity: 0.7;
}

.btn-close:focus {
  box-shadow: none;
}

.btn-close:focus-visible,
.close-popup:focus-visible,
.rollama-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Bootstrap's light variant uses a filter on the SVG; the glyph only needs a colour. */
.btn-close.btn-close-white {
  filter: none;
  color: #fff;
}

/* The dark/plain-mode button catch-alls would box the X; keep their text colour, drop the box. */
body.dark-mode .btn-close,
body.dark-mode .close-popup,
body.dark-mode .rollama-close,
body.plain-mode .btn-close,
body.plain-mode .close-popup,
body.plain-mode .rollama-close {
  background-color: transparent !important;
  border: none !important;
  filter: none !important;
}

/* Game-menu and medal-mountain modals sit on dark or teacher-chosen quest colours; match their white headings. */
.modal-close.rollama-close {
  color: #fff;
}

/* Dark #404040 modals (.modal--dark: login, register, explorer sign-up, Roll Call). */
.modal--dark .btn-close,
.modal--dark .close-popup,
.modal--dark .rollama-close {
  color: #fff;
}