.ecr-dice-widget{ width:100%; user-select:none; }
.ecr-dice-widget__wrap{
  display:flex;
  gap:10px;
  align-items:center;
}

.ecr-dice-widget__panel{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  align-items:center;
}

/* shared dice look (border + shadow) */
.ecr-dice__pipdice,
.ecr-dice__imagedice{
  width: 76px;
  height: 76px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
  display:grid;
  place-items:center;
  cursor:pointer;
  overflow:hidden;
}

.ecr-dice__imagedice img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.ecr-dice__fallback{
  font-size: 22px;
  font-weight: 800;
  color: #111;
}

/* pip positions */
.ecr-dice__pip{
  position:absolute;
  width:12px; height:12px;
  border-radius:999px;
  background:#111;
  opacity:0;
  transform: translate(-50%, -50%);
}
.ecr-dice__pipdice{ position:relative; }
.ecr-dice__pip[data-pos="tl"]{ left:25%; top:25%; }
.ecr-dice__pip[data-pos="tr"]{ left:75%; top:25%; }
.ecr-dice__pip[data-pos="ml"]{ left:25%; top:50%; }
.ecr-dice__pip[data-pos="c"] { left:50%; top:50%; }
.ecr-dice__pip[data-pos="mr"]{ left:75%; top:50%; }
.ecr-dice__pip[data-pos="bl"]{ left:25%; top:75%; }
.ecr-dice__pip[data-pos="br"]{ left:75%; top:75%; }

.ecr-dice__pipdice.is-rolling,
.ecr-dice__imagedice.is-rolling{
  animation: ecrDiceWobble 0.12s linear infinite;
}
@keyframes ecrDiceWobble{
  0%{ transform: rotate(-2deg) scale(0.99); }
  50%{ transform: rotate(2deg) scale(1.01); }
  100%{ transform: rotate(-2deg) scale(0.99); }
}