.d20die-canvas{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  background: transparent;
}

/* Assignment result: D20 roll area */
.assignment-d20-info{
	margin-bottom: 15px;
}

.assignment-d20-mount{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  max-width: 580px;
  margin: 0 auto;
}

.assignment-d20-roll-btn{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  color:inherit;
  cursor:pointer;
}

.assignment-d20-roll-btn:disabled{
  opacity:0.55;
  cursor:default;
}

/* Power-hold UI (assignment result) */
.assignment-die-powerbar{
  position:relative;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  overflow:hidden;
  margin-top:10px;
}

.assignment-die-powerfill{
  height:100%;
  width:0%;
  transform-origin:left center;
  will-change: width, background-color;
}

.assignment-die-powerfill::after{
  content:"";
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.25), rgba(255,255,255,0.0));
  transform:translateX(-40%);
  opacity:0.35;
}

.assignment-d20-roll-btn{
  user-select:none;
  touch-action:none; /* important for mobile press/hold */
  -webkit-touch-callout:none; /* prevent iOS long-press callout */
  -webkit-user-select:none;
}

@keyframes assignmentPowerWobble{
  0%   { transform:translateX(0) rotate(0deg) }
  10%  { transform:translateX(-10px) rotate(-1.2deg) }
  20%  { transform:translateX(8px)  rotate(1.0deg) }
  30%  { transform:translateX(-7px) rotate(-0.9deg) }
  40%  { transform:translateX(6px)  rotate(0.7deg) }
  55%  { transform:translateX(-5px) rotate(-0.5deg) }
  70%  { transform:translateX(4px)  rotate(0.35deg) }
  85%  { transform:translateX(-2px) rotate(-0.2deg) }
  100% { transform:translateX(0) rotate(0deg) }
}


.assignment-power-wobble{
  animation:assignmentPowerWobble 420ms cubic-bezier(.2,.8,.2,1);
}

.assignment-d20-roll-btn.assignment-power-wobble{
  animation:assignmentPowerWobble 420ms cubic-bezier(.2,.8,.2,1);
}