/* =========================================== */
/* MAIN CARD WRAPPER                           */
/* =========================================== */
.wor-artifact-wrap {
  width: 370px;
  margin: 100px auto;
  background: rgb(0 0 0);
  border: 3px solid #ff3a3a;
  border-radius: 20px;
  padding: 16px 16px 22px;
  position: relative;   /* create stacking context for bg + hero + content */
  overflow: visible;    /* allow hero to bleed outside the border */
  box-shadow: 0 0 35px rgba(255, 0, 0, 0.25);
  color: #FCEFCF;
  font-family: "Montserrat", "Roboto", sans-serif;
}

/* rarity / swirl background behind EVERYTHING in the card */
.wor-artifact-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wor-bg-img, none) center -12px / 380px auto no-repeat;
  pointer-events: none;
  z-index: 0; /* bottom layer inside the card */
}

/* =========================================== */
/* HERO LAYER – between bg and card content    */
/* =========================================== */
.wor-hero-thumb {
  position: absolute;
  top: -120px;       /* tweak vertical position */
  right: -140px;     /* tweak horizontal / bleed */
  width: 460px;     /* fixed hero box */
  height: 460px;
  z-index: 1;       /* between bg (::before) and content */
  pointer-events: none;
  filter: drop-shadow(0 0 15px rgba(0,0,0,0.75));
}

.wor-hero-thumb-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;      /* keep whole hero visible */
  object-position: center;  /* center inside that box */
}

/* =========================================== */
/* CARD CONTENT – always above hero            */
/* =========================================== */

/* All these share z-index:2 so they sit above hero */
.wor-artifact-rating,
.wor-scene,
.wor-title,
.wor-level-tabs,
.wor-bottom-border,
.wor-desc-panel {
  position: relative;
  z-index: 2;
}

/* rating line */
.wor-artifact-rating {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #000000a6;
    width: 195px;
    border-radius: 5px;
}
.wor-artifact-rating-label { font-weight: 600; }
.wor-star {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffd700" d="M316.9 17.8L370.6 150.2 512 171.5C535.7 174.9 545.5 202.4 528.9 218.8L430.3 315.1 453.5 454.5C457.1 478.1 434.4 495.4 413.5 485.4L288 423.3 162.5 485.4C141.6 495.4 118.9 478.1 122.5 454.5L145.7 315.1 47.1 218.8C30.5 202.4 40.3 174.9 64 171.5L205.4 150.2 259.1 17.8C268.3 -5.9 307.7 -5.9 316.9 17.8Z"/></svg>') center/contain no-repeat;
  opacity: .25;
}
.wor-star.is-on { opacity: 1; }

/* scene spacer */
.wor-scene {
  width: 100%;
  height: 240px;
  margin-top: 4px;
}

/* artifact centered */
.wor-artifact-img {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 185px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* class icon */
.wor-class-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 0px;
  height: 0px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3; /* make sure it’s above hero & artifact */
}

/* title */
.wor-title {
  text-align: center;
  margin-top: 15px;
  font-family: "Almendra SC", "Cinzel", "DM Serif Display", serif;
  font-size: 24px;
  font-weight: 600;
  text-shadow: 0 0 10px #000;
  color: #FCEFCF;
}

/* tabs */
.wor-level-tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 18px 0 12px;
}

.wor-level-tab {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgb(0 0 0 / 0%);
  border: 2px solid rgba(0,0,0,0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: .1s ease-out;
}
.wor-level-tab-plus {
  font-size: 1.3rem;
  line-height: 1;
  color: #15ff00;
}
.wor-level-tab-label {
  font-size: 0.8rem;
  line-height: 1;
  color: #FCEFCF;
  letter-spacing: -0.5px;
}
.wor-level-tab.is-active,
.wor-level-tab:hover {
  background: radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 70%);
  border: 2px solid rgba(255,0,0,0.7);
  box-shadow: 0 0 12px rgba(255,0,0,.55);
}
.wor-level-tab.is-active .wor-level-tab-plus,
.wor-level-tab:hover .wor-level-tab-plus {
  color: #ffba36;
}

/* divider */
.wor-bottom-border {
  display: block;
  width: 90%;
  height: 2px;
  margin: 16px auto 12px;
  background: linear-gradient(
    to right,
    rgba(255, 215, 0, 0) 0%,
    rgba(255, 215, 0, 1) 50%,
    rgba(255, 215, 0, 0) 100%
  );
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}

/* scrollable description */
.wor-desc-panel {
  padding: 0 12px;
  font-size: 1rem;
  line-height: 1.45;
  font-family: "Montserrat", Sans-serif;
  text-align: center;
  color: #FCECB1;
  word-spacing: 1px;
  max-height: 100px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.4) rgba(0, 0, 0, 0.3);
}
.wor-desc-panel p { margin: 0; }

/* scrollbars (WebKit) */
.wor-desc-panel::-webkit-scrollbar {
  width: 6px;
}
.wor-desc-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.wor-desc-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ffd700, #ffb000);
  border-radius: 10px;
}
.wor-desc-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #ffea00, #ffb700);
}

/* pulsing var highlight */
.wor-var {
  color: #00ccff;
  font-weight: 700;
  position: relative;
  padding: 0 2px;
}
.wor-var::after {
  content: "";
  position: absolute;
  inset: -2px -5px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  pointer-events: none;
  animation: worVarPulseWhite 2s ease-in-out infinite;
}
@keyframes worVarPulseWhite {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* BACKGROUND SWIRL MASKED TO CARD SHAPE */
.wor-artifact-bg-mask {
  position: absolute;
  inset: 0;
  background: var(--wor-bg-img) center -12px / 380px auto no-repeat;
  border-radius: 20px;   /* same radius as the card */
  overflow: hidden;      /* CLIPS ONLY THIS LAYER */
  z-index: 0;
  pointer-events: none;
}