#joint-ui {
  position: absolute;
  width: 240px;
  padding: 14px 16px 10px 16px;
  z-index: 99999;
  animation: fadeIn 0.2s;
  color: #ea3bff;
  font-family: 'Poppins', Arial, sans-serif;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  transform: scale(0.5) skewX(-18deg) perspective(420px) rotateY(-7deg) rotateX(5deg);
  transform-origin: top left;
}

#joint-ui > * {
  transform: skewX(18deg);
}

.joint-header {
  font-size: 1.10em;
  margin-bottom: 8px;
  letter-spacing: 1px;
  color: #ea3bff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.joint-progress-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 7px;
  gap: 10px;
}

.joint-progress-bar {
  background: #3a1c43;
  border-radius: 10px;
  width: 80%;
  height: 6px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
}

.joint-progress-bar::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: 0; right: 0; height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg, #fff4 0%, #fff0 100%);
  opacity: 0.28;
  pointer-events: none;
}

#joint-progress {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(234,59,255,0.5) 0%, rgba(171,58,234,0.5) 100%);
  border-radius: 0;
  transition: width 0.25s cubic-bezier(.77,0,.18,1.18);
}

.joint-puffs {
  min-width: 48px;
  text-align: right;
  color: #fff4fb;
  font-size: 0.92em;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

.joint-controls {
  display: flex;
  justify-content: space-between;
  gap: 15px;            /* Add this line (change to 5% if you prefer percentage) */
  font-size: 0.99em;
  letter-spacing: 0.5px;
  color: #e8c9ff;
  padding: 5px 7px;
  border-radius: 8px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}



#joint-hide-ui:hover {
  color: #ea3bff;
  text-decoration: underline;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}