:root {
  --brand: #f34345;
  --lootbox-red: #f34345;
  --lootbox-red-hover: #d53439;
  --lootbox-lime: #d5eb81;
}

html:not([data-lootbox-ready="true"]) body {
  overflow: hidden !important;
  background: #0a0a0a !important;
}

html:not([data-lootbox-ready="true"]) body > * {
  visibility: hidden !important;
}

html:not([data-lootbox-ready="true"]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  visibility: visible !important;
  background: #0a0a0a;
}

html:not([data-lootbox-ready="true"]) body::after {
  content: "lootbox.run";
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2147483647;
  width: 220px;
  height: 72px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  padding-left: 82px;
  overflow: hidden;
  visibility: visible !important;
  color: #fff;
  background-image: url("/lootbox-icon.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 72px 72px;
  font: 700 44px/1 var(--font-poppins), Arial, Helvetica, sans-serif;
  letter-spacing: -0.045em;
}

::selection {
  background: rgba(243, 67, 69, 0.38);
  color: #fff;
}

.proof-glow {
  background-image: linear-gradient(90deg, #f34345, #d5eb81, #f34345, #e7f4af) !important;
}

img.lootbox-brand-icon {
  width: 30px !important;
  height: 30px !important;
  object-fit: cover !important;
  object-position: left center !important;
  background: transparent !important;
}

img.lootbox-brand-mark {
  width: var(--lootbox-mark-size, 30px) !important;
  min-width: var(--lootbox-mark-size, 30px) !important;
  max-width: var(--lootbox-mark-size, 30px) !important;
  height: var(--lootbox-mark-size, 30px) !important;
  min-height: var(--lootbox-mark-size, 30px) !important;
  max-height: var(--lootbox-mark-size, 30px) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: left center !important;
  background: transparent !important;
  padding: 0 !important;
  flex: 0 0 var(--lootbox-mark-size, 30px) !important;
}

img.lootbox-brand-image {
  object-fit: cover !important;
  object-position: left center !important;
  background: transparent !important;
  padding: 0 !important;
}

#lootbox-local-toast {
  border-color: rgba(213, 235, 129, 0.42) !important;
}

@media (max-width: 639px) {
  main .grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}