/* Regla deslizable de las pantallas de medidas (modelo: Hipnozia), con los colores y fuentes de Kure. */
.regla { position: relative; width: 100%; user-select: none; -webkit-user-select: none; }
.regla-valor { text-align: center; color: #fff; line-height: 1; margin-bottom: 14px; }
.regla-valor b { font-family: Merriweather, serif; font-weight: 400; font-size: 48px; letter-spacing: -1px; }
.regla-valor span { font-family: "Reddit Sans", sans-serif; font-weight: 600; font-size: 18px; margin-left: 4px; }

.regla-pista {
  position: relative; height: 84px; overflow-x: scroll; overflow-y: hidden; cursor: grab;
  scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  border-bottom: 1px solid #33325B;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.regla-pista::-webkit-scrollbar { display: none; }
.regla-pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.regla-tira { position: relative; height: 100%; box-sizing: content-box; }
.regla-tira i { position: absolute; top: 0; width: 1px; height: 16px; background: rgba(190, 196, 210, .35); scroll-snap-align: center; }
.regla-tira i.m5 { height: 24px; background: rgba(190, 196, 210, .55); }
.regla-tira i.m10 { height: 36px; width: 2px; background: #BEC4D2; }
.regla-tira em { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); font-style: normal;
  font-family: "Reddit Sans", sans-serif; font-size: 14px; color: #7F8699; pointer-events: none; }

/* aguja fija al centro, con el degradado de la marca y el triángulo abajo */
.regla-aguja { position: absolute; left: 50%; bottom: 30px; width: 4px; height: 70px; margin-left: -2px; border-radius: 2px;
  background: linear-gradient(180deg, #8A5EFF, #4675FF 50%, #34CBBF); pointer-events: none; }
.regla-aguja::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  border: 9px solid transparent; border-bottom: 12px solid #34CBBF; border-top: 0; }
.regla-ayuda { margin-top: 10px; text-align: center; font-family: "Reddit Sans", sans-serif; font-size: 12px; color: #7F8699; }