.new-item-overlay-open {
  overflow: hidden;
}

.new-item-shade {
  position: fixed;
  z-index: 6200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(5, 6, 6, 0.68);
  backdrop-filter: blur(2px) brightness(0.5);
}

.new-item-panel {
  position: relative;
  width: min(760px, calc(100vw - 80px));
  height: min(400px, calc(100vh - 96px));
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(248, 246, 239, 0.96);
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--new-item-rarity, #b0c3d9) 34%, transparent) 0%, color-mix(in srgb, var(--new-item-rarity, #b0c3d9) 16%, transparent) 18%, transparent 39%),
    linear-gradient(112deg, color-mix(in srgb, var(--new-item-rarity, #b0c3d9) 16%, #0d0e0e 84%), #0b0c0c 70%);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  isolation: isolate;
}

.new-item-panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.55;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--new-item-rarity, #b0c3d9) 30%, transparent), transparent 25%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015), transparent 32%, rgba(0, 0, 0, 0.24));
}

.new-item-rarity-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 7px;
  background: var(--new-item-rarity, #b0c3d9);
  box-shadow: 1px 0 14px color-mix(in srgb, var(--new-item-rarity, #b0c3d9) 55%, transparent);
}

.new-item-title {
  position: absolute;
  top: 27px;
  left: 53px;
  color: var(--new-item-rarity, #b0c3d9);
  font: 700 clamp(27px, 3vw, 38px) var(--font-ui);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.42);
}

.new-item-stage {
  position: absolute;
  top: 64px;
  right: 62px;
  bottom: 83px;
  left: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.new-item-weapon {
  display: block;
  width: min(88%, 620px);
  max-width: 100%;
  max-height: 118%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 20px 18px rgba(0, 0, 0, 0.58));
  animation: new-item-in 240ms cubic-bezier(0.18, 0.75, 0.2, 1) both;
}

.new-item-image-fallback {
  display: grid;
  width: 48%;
  height: 58%;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}


.new-item-arrow {
  position: absolute;
  z-index: 4;
  top: 48%;
  width: 42px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.new-item-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.new-item-arrow-left { left: 11px; }
.new-item-arrow-right { right: 11px; }

.new-item-arrow img {
  width: 22px;
  height: 22px;
  opacity: 0.92;
  filter: brightness(0) invert(1);
}

.new-item-arrow-right img { transform: rotate(180deg); }
.new-item-arrow:hover img,
.new-item-arrow:focus-visible img { opacity: 1; transform: scale(1.08); }
.new-item-arrow-right:hover img,
.new-item-arrow-right:focus-visible img { transform: rotate(180deg) scale(1.08); }

.new-item-details {
  position: absolute;
  bottom: 61px;
  left: 54px;
  display: grid;
  max-width: 62%;
  gap: 5px;
}

.new-item-name {
  overflow: hidden;
  color: rgba(247, 245, 238, 0.96);
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.new-item-collection {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(244, 242, 235, 0.68);
  font-size: 10px;
}

.new-item-collection-image {
  width: 35px;
  height: 35px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.new-item-index {
  position: absolute;
  right: 50px;
  bottom: 69px;
  color: rgba(244, 242, 235, 0.6);
  font-size: 10px;
}

.new-item-divider {
  position: absolute;
  right: 22px;
  bottom: 43px;
  left: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.11);
}

.new-item-continue {
  position: absolute;
  right: 29px;
  bottom: 11px;
  height: 29px;
  padding: 0 8px;
  border: 0;
  outline: 0;
  color: rgba(248, 246, 240, 0.92);
  background: transparent;
  font: 700 10px var(--font-ui);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.new-item-continue:hover,
.new-item-continue:focus-visible {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.24);
}

@keyframes new-item-in {
  from { opacity: 0; transform: scale(0.965) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 720px) {
  .new-item-shade { padding: 12px; }
  .new-item-panel { width: calc(100vw - 24px); height: 360px; min-height: 0; }
  .new-item-title { left: 34px; }
  .new-item-stage { right: 52px; left: 52px; }
  .new-item-details { left: 34px; max-width: 70%; }
  .new-item-index { right: 34px; }
}