/* Seven equal sectors: snowman is centred exactly under the fixed pointer. */
.sectors {
  background: conic-gradient(from -25.714deg,
    #e7ba91 0deg 51.428deg, #dfa18f 51.428deg 102.856deg,
    #eab083 102.856deg 154.284deg, #e7be8d 154.284deg 205.712deg,
    #c8b7ae 205.712deg 257.14deg, #aeb09b 257.14deg 308.568deg,
    #efbf83 308.568deg 360deg);
}
.sectors::after {
  background: repeating-conic-gradient(from -25.714deg,
    transparent 0deg 51deg, #7e57385c 51deg 51.55deg);
}

/* The stand is behind the wheel; only its legs and solid base remain visible. */
.wheel { z-index: 2; }
.wheel-stage { height: calc(var(--size) + 76px); }
.wheel-stand {
  z-index: 1; bottom: 0; left: 10%; width: 80%; height: 47px;
  border-radius: 9px 9px 13px 13px;
  background: linear-gradient(180deg,#f3d3a8 0%,#dca971 78%,#c68e58 100%);
  border: 1px solid #c7925f;
  box-shadow: 0 9px 12px #74503532, inset 0 3px 3px #fff4d1aa;
}
.wheel-stand::before,.wheel-stand::after {
  z-index: -1; bottom: 25px; width: 16%; height: 58px;
  border: 1px solid #bd8654;
  background: linear-gradient(90deg,#cf9760,#efc794 55%,#d39c65);
}
.wheel-stand::before { left: 15%; transform: skew(-20deg); }
.wheel-stand::after { right: 15%; transform: skew(20deg); }

/* Label toward the rim, matching figure beneath it, all kept upright. */
.sector-item {
  margin: 0; width: 25%; height: 29%; padding: 0;
  transform-origin: center; justify-content: flex-start; line-height: 1.02;
}
.sector-item span { height: 31%; }
.sector-item img { width: 86%; height: 69%; }
.item-0 { transform: translate(-50%,-50%) rotate(0deg) translateY(-76%) rotate(0deg); }
.item-0 span { width: 100%; min-height: 34px; }
.item-0 img { width: 76%; height: 52%; }
.item-1 { transform: translate(-50%,-50%) rotate(51.428deg) translateY(-120%) rotate(-51.428deg); }
.item-2 { transform: translate(-50%,-50%) rotate(102.856deg) translateY(-120%) rotate(-102.856deg); }
.item-3 { transform: translate(-50%,-50%) rotate(154.284deg) translateY(-120%) rotate(-154.284deg); }
.item-4 { transform: translate(-50%,-50%) rotate(205.712deg) translateY(-120%) rotate(-205.712deg); }
.item-5 { transform: translate(-50%,-50%) rotate(257.14deg) translateY(-120%) rotate(-257.14deg); }
.item-6 { transform: translate(-50%,-50%) rotate(308.568deg) translateY(-120%) rotate(-308.568deg); }
.sector-item > * { transform: none; }

@media (max-width:390px) {
  .wheel-stage { height: calc(var(--size) + 68px); }
  .sector-item { font-size: 10px; }
}