html, body {
  margin: 0; padding: 0; background: #000; width: 100%; height: 100%; overflow: hidden;
}
/* Container: top-aligned, centered horizontally, square area */
#wheelWrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vh, 90vw);
  height: min(90vh, 90vw);
}
/* The wheel (rotates), holding the image and the numbering overlay */
#wheel {
  position: relative;
  width: 100%; 
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(0deg);
}
/* The actual roulette texture */
#wheelImg {
  position: absolute;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
}
/* Div to hold all numeric labels */
#numbers {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* Numeric label styling */
.label {
  position: absolute;
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 1.7vmin; /* scale decently on mobile */
  transform-origin: 50% 50%;
}
/* Pointer at top center */
#pointer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -30%) rotate(180deg); 
  width: 0; height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid gold;
  z-index: 999;
}